jQuery 속성 조작 - toggleClass() 메서드

jQuery 효과 참조 매뉴얼

예제

모든 <p> 요소의 "main" 클래스를 설정하거나 제거하는 전환을 수행합니다：

$("button").click(function(){
  $("p").toggleClass("main");
});

직접 시도해보세요

정의 및 사용법

toggleClass()는 선택된 요소에 대해 하나 이상의 클래스를 설정하거나 제거하는 전환을 수행합니다.

이 메서드는 각 요소에서 지정된 클래스를 확인합니다. 존재하지 않으면 클래스를 추가하고, 이미 설정되어 있다면 클래스를 제거합니다. 이것이 바로 전환 효과입니다.

하지만, "switch" 파라미터를 사용하여 단지 클래스를 추가하거나 제거할 수 있습니다.

문법

$().toggleClass(class,switch)
파라미터 설명
class

필수. 추가하거나 제거할 클래스를 정의하는 요소를 정의합니다.

여러 클래스를 정의하려면 공백으로 클래스 이름을 구분합니다.
switch 선택사항. 불리언 값. 클래스를 추가하거나 제거할지 결정합니다.

함수를 사용하여 클래스를 전환합니다

$().toggleClass(function(index,class),switch)

직접 시도해보세요

파라미터 설명
function(index,class)

필수. 추가하거나 제거할 하나 이상의 클래스 이름을 정의하는 함수를 정의합니다.

  • index - 선택사항. 선택자의 index 위치를 받아들입니다.
  • class - 선택사항. 현재 선택자의 클래스를 받아들입니다.
switch 선택사항. 불리언 값. 클래스를 추가(true) 또는 제거(false)할지 결정합니다.

jQuery 효과 참조 매뉴얼