classList 객체의 toggle 메소드
classList 객체의 toggle 메소드는
요소의 지정된 CSS 클래스를 토글합니다: 클래스가 없으면 추가하고,
있으면 제거합니다.
구문
element.classList.contains(class);
예시
이 예시에서 toggle 메소드를 사용하면
zzz 클래스는 요소에 이미 존재하므로
제거됩니다:
<p id="elem" class="www ggg zzz"></p>
let elem = document.querySelector('#elem');
elem.classList.toggle('zzz');
코드 실행 결과:
<p id="elem" class="www ggg"></p>
예시
이 예시에서 toggle 메소드를 사용하면
zzz 클래스는 요소에 없으므로
추가됩니다:
<p id="elem" class="www ggg"></p>
let elem = document.querySelector('#elem');
elem.classList.toggle('zzz');
코드 실행 결과:
<p id="elem" class="www ggg zzz"></p>
함께 보기
-
classList.add메소드,
지정된 클래스를 추가합니다. -
classList.remove메소드,
지정된 클래스를 제거합니다. -
classList.contains메소드,
지정된 클래스를 확인합니다.
