jQuery에서 CSS 스타일을 추가하거나 제거하는 방법

직장에서 페이지 요소의 스타일을 변경하기 위해 Javascript를 사용해야 하는 경우가 많습니다. 한 가지 방법은 페이지 요소의 CSS 클래스(Class)를 변경하는 것입니다. 전통적인 Javascript에서는 일반적으로 HTML Dom의 classname 속성을 처리하여 이를 수행합니다. jQuery는 이 기능을 달성하기 위한 세 가지 방법을 제공합니다. 전통적인 방법이지만 코드가 많이 절약됩니다. 여전히 같은 문장 - "jQuery는 JavaScript 코드를 간결하게 만듭니다!"

1. addClass() - CSS 클래스 추가

$("#target").addClass("newClass");
//#target을 참조합니다. 스타일을 지정해야 하는 요소의 ID
//newClass는 CSS 클래스의 이름을 나타냅니다

2.removeClass() - CSS 클래스를 제거합니다

$("#target").removeClass("oldClass " );
//#target은 CSS 클래스를 제거해야 하는 요소의 ID를 나타냅니다.
//oldClass는 CSS 클래스의 이름을 나타냅니다

3.toggleClass() - CSS 클래스 추가 또는 제거

CSS 클래스가 이미 있으면 제거되고, CSS 클래스가 없으면 추가됩니다.

$("#target").toggleClass("newClass")
//ID가 "target"인 요소에 CSS 스타일이 정의되어 있으면 제거됩니다.
//반대로 CSS 클래스 " newClass"에 이 ID가 할당됩니다.

실제 응용 프로그램에서는 이러한 CSS 클래스를 먼저 정의한 다음 Javascript 이벤트 트리거링(예: 링크 클릭)을 통해 페이지 요소 스타일을 변경하는 경우가 많습니다. 또한 jQuery는 요소에 CSS 클래스가 할당되었는지 확인하는 hasClass("className") 메서드도 제공합니다.

FAQ:

<label for="TrueName" generated="true" class="msg-error" style="">正确</label>

By addClass("msg-success");

<label for="TrueName" generated="true" class="msg-error msg-success" style="">正确</label>

CSS文件
误：（msg-success将被msg-error覆盖，样式不变）
span.msg-error, label.msg-error{color: #f00;}
span.msg-success, label.msg-success{color: #000;}
正：
span.msg-error, label.msg-error{color: #f00;}
span.msg-success, label.msg-success{color: #000;}

위 내용은 jQuery에서 CSS 스타일을 추가하거나 제거하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!