classList 객체의 toggle 메소드

classList 객체의 toggle 메소드는 요소의 지정된 CSS 클래스를 토글합니다: 클래스가 없으면 추가하고, 있으면 제거합니다.

구문

javascriptelement.classList.contains(class);

예시

이 예시에서 toggle 메소드를 사용하면 zzz 클래스는 요소에 이미 존재하므로 제거됩니다:

html<p id="elem" class="www ggg zzz"></p>

javascriptlet elem = document.querySelector('#elem');
elem.classList.toggle('zzz');

코드 실행 결과:

html<p id="elem" class="www ggg"></p>

예시

이 예시에서 toggle 메소드를 사용하면 zzz 클래스는 요소에 없으므로 추가됩니다:

html<p id="elem" class="www ggg"></p>

javascriptlet elem = document.querySelector('#elem');
elem.classList.toggle('zzz');

코드 실행 결과:

html<p id="elem" class="www ggg zzz"></p>

함께 보기