jquery가 클래스 styles_jquery를 동적으로 추가하고 삭제하는 방법 소개

스타일 가져오기 및 설정 클래스 가져오기 및 설정 모두 attr() 메서드를 사용하여 수행할 수 있습니다. 예를 들어 p 요소의 클래스를 가져오려면 attr() 메서드를 사용합니다. JQuery 코드는 다음과 같습니다.

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

var p_class = $("p").attr("class") //p 요소의 클래스 가져오기
[html]
attr() 메소드를 사용하여 p 요소의 클래스를 설정합니다. JQuery 코드는 다음과 같습니다.
[code]
1 $("p").attr("'class", "high" ); //p 요소의 클래스를 "high"로 설정

대부분의 경우 원래 클래스에 새 클래스를 추가하는 대신 원래 클래스를 새 클래스로 대체합니다.
추가스타일 추가클래스란? p 요소의 원래 클래스가 myClass인 경우 high라는 클래스를 추가한 후 클래스 속성은 myClass와 high 두 스타일의 중첩인 "myClass high"가 됩니다. JQuery는 스타일을 추가하기 위한 특별한 addClass() 메서드를 제공합니다. 예제를 더 쉽게 이해하려면 먼저 스타일 태그에 다른 스타일 세트를 추가하세요.

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

1 .high{ color:red; }
2 .another{font-style:italic; color:blue }
그런 다음 "클래스 추가" 버튼을 추가하세요. 버튼의 이벤트 코드는 다음과 같습니다.
1 $("#btn_3").click(function(){
2 $("#nm_p").addClass("another" ); // 스타일 추가
3 });

"클래스 추가" 버튼을 클릭하면 p 요소 스타일이 기울임꼴로 변경되고, 이전 빨간색 글꼴도 파란색. 이때, p 요소는 "high"와 "another"라는 두 가지 클래스 값을 동시에 갖는다. CSS에는 다음 두 가지 조항이 있습니다.
1. 요소에 여러 클래스 값이 추가되면 스타일을 병합하는 것과 같습니다. 2. 서로 다른 클래스가 동일한 스타일 속성을 설정하는 경우 후자가 전자를 재정의합니다. 위의 예에서는 p 요소에 다음 스타일을 추가하는 것과 같습니다.

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

1색 : 빨간색; /* 글꼴 색상 설정 빨간색*/
2 글꼴 스타일: 기울임꼴
3 색상: 파란색

위 스타일 중에는 두 가지 A "색상" 속성이 있으며 후속 "색상" 속성은 이전 "색상" 속성을 덮어쓰므로 최종 "색상" 속성 값은 "빨간색"이 아닌 "파란색"입니다.
스타일 제거 사용자가 버튼을 클릭할 때 클래스의 특정 값을 삭제하려면 addClass() 메서드와 반대되는 RemoveClass() 메서드를 사용하면 됩니다. 일치하는 요소 전체 또는 지정된 클래스에서. 예를 들어, 다음 JQuery 코드를 사용하여 p 요소에서 값이 "high"인 클래스를 삭제할 수 있습니다.

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

1 $("p").removeClass("high") //p 요소에서 값이 "high"인 클래스를 제거합니다.
p 요소의 두 클래스를 모두 제거하려면 제거 클래스() 메서드를 두 번 사용해야 합니다. 코드는 다음과 같습니다.
1 $("p").removeClass("high").removeClass ("another");
쿼리는 더 간단한 방법을 제공합니다. 공백이 포함된 여러 클래스 이름을 삭제할 수 있습니다. 코드는 다음과 같습니다.
1 $("p").removeClass("high another")
또한 RemoveClass( ) 방법을 사용하면 동일한 효과를 얻을 수 있습니다. 매개변수를 사용하지 않으면 모든 클래스 값이 삭제됩니다. JQuery 코드는 다음과 같습니다.
1 $("p").removeClass() //p 요소의 모든 클래스 제거
Change style JQuery 메서드 토글()이 있는데 JQuery 코드는 다음과 같습니다.
1ggleBtn.toggle(function(){
2 //요소 표시 코드 ③
3 }, function(){
4 // 요소 숨김 코드 ④
5 })

여기서 oggle() 메소드의 기능은 요소인 경우 코드 ③과 코드 ④의 두 가지 기능을 교대로 실행하는 것입니다. 원래 표시되어 있으면 숨깁니다. 요소가 원래 숨겨져 있으면 표시합니다. 이때,ggle() 메소드는 주로 동작의 반복적인 전환을 제어합니다.
또한 JQuery는 반복되는 스타일 전환을 제어하기 위한ggleClass() 메서드도 제공합니다. 클래스 이름이 있으면 제거하고, 클래스 이름이 없으면 추가합니다. 예를 들어 p 요소에 대해ggleClass() 메서드를 수행합니다.

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

1 $("p").toggleClass ("another"); // 클래스 이름을 "another"로 반복적으로 전환

"Switch Style" 버튼을 계속 클릭하면 p 요소의 클래스 값이 "myClass"와 "myClass another" 간에 반복적으로 전환됩니다.
특정 스타일이 포함되어 있는지 확인 hasClass()를 사용하면 요소에 특정 클래스가 포함되어 있는지 확인할 수 있습니다. 그렇다면 true를 반환하고, 그렇지 않으면 false를 반환합니다. 예를 들어, 다음 코드를 사용하여 p 요소에 "another" 클래스가 포함되어 있는지 확인할 수 있습니다.

코드 복사

1 $("p").hasClass("another");

이 메소드는 코드의 가독성을 높이기 위해 생성되었습니다. JQuery 내에서는 is() 메서드가 실제로 이 기능을 완료하기 위해 호출됩니다. 이 방법은 다음 코드와 같습니다.

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

소스 인쇄 보기 1 $("p").is(".another"); //is("." class);