[js] 유용한 classlist

class 안에 class 를 넣어주는 아주 유용한 아이~!

Element.classList.toggle

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

 
Element.classList.add

명시된 클래스를 추가하는 메서드

 
Element.classList.remove

명시된 클래스를 제거하는 메서드

예시

var element = document.getElementById('test');

function toggle() {
	element.classList.toggle('test-class');
}

function add() {
	element.classList.add('test-class');
}

function remove() {
	element.classList.remove('test-class');
}

.test-class {
  background: #00FF00 !important
}