toggleClass()

JavaScript의 toggleClass 메서드는 HTML 요소의 클래스를 토글(전환)하는 데 사용된다. 

클래스를 토글한다는 것은 요소의 클래스가 이미 존재하는 경우 해당 클래스를 제거하고,

존재하지 않는  경우 클래스를 추가하는 것을 의미한다.

이렇게 클래스를 토글하면 요소의 스타일이나 동작을 변경할 수 있다.

 

 

<div id="myDiv" class="highlighted">Hello, World!</div>

위 블럭을 아래처럼 바꾸면

var myDiv = document.getElementById('myDiv');
myDiv.classList.toggle('highlighted');

myDiv 요소의 클래스 중에 'highlighted' 클래스가 있는지 확인한다.

클래스가 있으면 제거하고, 없으면 추가한다.

따라서 위의 코드를 실행하면 'highlighted' 클래스가 토글된다.

 

toggleClass method를 사용하여 요소의 클래스를 토글할 때,

CSS 스타일 시트에서 해당 클래스에 대한 스타일을 정의하고,

클래스가 추가 또는 제거될 때 스타일이 적용되도록 할 수 있다.

 

이렇게 하면 웹 페이지의 동적인 스타일링과 상호작용을 달성할 수 있다.