[Element.classList] JavaScript를 이용한 클래스 제어

안녕하세요. Jay 입니다.

오늘은 JavaScript를 이용한 클래스 제어 방법에 대해서 알아보도록 하겠습니다.

 

먼저 Element.classList의 반환형은 'DOMTokenList'입니다.

이 DomTokenList의 메서드는 많은 것이 있지만, 오늘은 세가지만 살펴보려고 합니다.

 

Element.classList.toggle

toggle, 전등 스위치를 껐다 켰다 하는 행위 처럼, 0과 1이 반복되는 행위를 의미합니다.
즉, 기존 값이 0이었다면 1로 바뀌고 기존 값이 1이었다면, 0으로 바뀌게 됩니다.
그래서 toggle 메서드는 클래스가 존재한다면 클래스를 제거하고, 클래스가 존재하지 않는다면 클래스를 추가하는 메서드입니다.

 

Element.classList.add

명시된 클래스를 추가하는 메서드입니다.

 

Element.classList.remove

명시된 클래스를 제거하는 메서드입니다.

 

 

실제 소스로 테스트 해보겠습니다.

위 소스에서 Toggle 버튼을 누르면 배경 색상이 변하고,

Add 버튼을 누르면 test-class 클래스가 추가되어 연두색으로 배경이 변경되고,

Remove 버튼을 누르면 test-class 클래스가 제거되어 빨간색 배경으로 돌아오는 것을 확인할 수 있습니다.

 

참고:

https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

Element.classList