[Javascript] classList 사용법, add(), remove(), toggle(), replace()

classList

classList는 element의 읽기전용 속성으로 css class의 현재 값을 반환한다.

element의 CSS class 목록 가져오기

다음은 div element의 class 목록을 콘솔에 출력하는 코드.

<div id="content" class="main red">JavaScript classList</div>

 

위 코드는 먼저 querySelector() 메소드를 통해 id가 content인 div element를 가져온다. 그 다음 element의 classList에 루프를 돌려 각각의 클래스명을 콘솔에 출력한다.

let div = document.querySelector('#content');

for (let cssClass of div.classList) {
  console.log(cssClass);
};

 

add()

지정한 클래스 값을 추가한다.

변수명.addEventListener('click', function(){
	변수명.classList.add('클래스명');
});

 

remove()

지정한 클래스 값을 제거한다

(존재하지 않는 클래스를 제거하는 경우 에러를 발생시키지 않는다)

변수명.addEventListener('click', function(){
	변수명.classList.remove('클래스명');
});

 

toggle()

add()와 remove() 를 한 번에 멀티로 쓸 수 있는 메서드

변수명.addEventListener('click', function(){
	변수명.classList.toggle('클래스명');
});

 

replace()

현재 존재하는 css class를 새로운 것으로 교체하기 위해서는 replace() 메소드를 사용한다. 

다음의 코드는 현재 존재하는 info class를 warning class로 바꾸는 코드.

변수명.addEventListener('click', function(){
	변수명.classList.replace('info','warning');
});