[Javascript] classList 정의와 사용방법

📚 classList 란?

javascript에서 classList는 element의 읽기전용 속성으로 css class의 현재 값을 반환한다. classList을 통해서 element에 css class 추가, 제거를 할 수 있다. 

 

📒 사용 예시

const classes = element.classList;

 

 

 

 

📚 classList class 추가, 삭제

element의 class 목록에 하나 이상의 css class를 추가하려면 classList의 add() 메소드를 사용하며, 삭제는 remove() 메소드를 사용한다. 

 

📒 사용 예시

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

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

 

 

 

📚 classList class toggle()

toggle()을 통해서 css을 스위치 처럼 껐다, 켰다 하는 기능을 사용 할 수 있다.

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

div.addEventListner("click", function(){
	div.classList.add('info');;
});