jQuery_jquery를 이용한 요소 스타일 설정 사용예

이 기사의 예에서는 jQuery를 사용하여 요소 스타일을 설정하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

CSS는 페이지에서 분리될 수 없는 부분입니다. jQuery는 CSS와 관련된 몇 가지 실용적인 방법도 제공합니다. 이전 기사에서는 요소에 CSS 스타일을 추가하기 위해 addClass()를 사용했습니다. 여기에서는 주로 jQuery가 페이지 스타일을 설정하는 방법을 소개합니다. 추가, 삭제, 동적 전환 등을 포함합니다.

1. CSS 카테고리를 추가하고 삭제합니다.

코드 복사 코드는 다음과 같습니다.

$(function() {
//동시에 여러 CSS 카테고리 추가
$("img").addClass("css1 css2");
});

예를 들어 위 코드는 img 요소 에 css1과 css2라는 두 가지 스타일을 추가합니다.

removeClass는 addClass 메소드에 해당하며 여기서는 예제를 반복하지 않습니다.

2. 카테고리를 동적으로 전환합니다.

사용자의 작업 상태에 따라 일부 요소의 스타일을 특정 카테고리(때로는 addClass() 카테고리, 때로는 제거클래스() 카테고리) 간에 전환하기를 원하는 경우가 많습니다. Jq는 이를 위해 직접 토글클래스(이름)를 제공합니다. 유사한 작업.

코드 복사 코드는 다음과 같습니다.

$(function() {
$("p").click(function() {
$(this).toggleClass("css1");
})
});

위 코드는 P 요소를 클릭할 때 CSS1 스타일의 연속 전환을 구현합니다. ToggleClass(name) 메소드는 하나의 CSS 카테고리만 설정할 수 있습니다. 여러 CSS를 전환할 수 없습니다.

3. 스타일을 직접 가져오고 설정합니다.

attr() 메소드와 완전히 유사하게 jQuery는 css(name)을 사용하여 특정 스타일의 스타일 값을 얻는 등 요소의 스타일을 직접 가져오고 설정하는 css() 메소드를 제공합니다. CSS(속성) 목록을 통해 여러 스타일을 동시에 설정하고, CSS(이름, 값)를 통해 요소의 특정 스타일을 설정합니다.

예: CSS(이름, 값)을 트리거하도록 mouseover 및 mouseout 이벤트를 설정하여 색상 표시를 수정합니다.

코드 복사 코드는 다음과 같습니다.

$(function() {
$("p").mouseover(function() {
$(this).css("color", "red");
});
$("p").mouseout(function() {
$(this).css("color", "black");
});
});

CSS 메소드는 opacity 속성을 제공합니다. 그리고 다양한 브라우저와 호환됩니다.

위 예제를 수정하고 마우스 이벤트를 통해 p 요소의 투명도 값을 설정합니다.

코드 복사 코드는 다음과 같습니다.

$(function() {
$("p").mouseover(function() {
$(this).css("불투명도", "0.5");
});
$("p").mouseout(function() {
$(this).css("불투명도", "1");
});
});

또한 요소에 특정 CSS 카테고리가 설정되어 있는지 확인하기 위해 CSS에 hasClass(name) 메서드가 제공됩니다. 부울 값을 반환합니다. 예:

코드 복사 코드는 다음과 같습니다.

$("li:last").hasClass("css1")

마지막 li의 css 속성에 css1 클래스가 포함되어 있는지 여부를 나타냅니다. 그리고

코드 복사 코드는 다음과 같습니다.

$("li:last").is(".css1" )

코드는 정확히 동일한 효과를 갖습니다.

jQuery 소스코드를 보면 hasClass 메소드가 is() 메소드입니다.

코드 복사 코드는 다음과 같습니다.

hasClass: function(selector) {
return this.is("." 선택기);
}

이 기사가 모든 사람의 jQuery 프로그래밍에 도움이 되기를 바랍니다.