[JavaScript] 자바스크립트에서 클래스 이름(class name) 추가/삭제

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

▤ 클래스 추가 [add]

element.classList.add('className'); // 클래스에 className 이 추가(기존 클래스 존재) element.classList.add('className1 className2');

▤ 클래스 삭제 [remove]

element.classList.remove('className'); // 클래스에 className 이 삭제(다른 클래스 그대로) element.classList.remove('className1 className2');

▤ 클래스 변경 [className]

element.className = 'className'; // 클래스 이름이 className로 변경(기존 클래스 사라짐)

▤ 클래스 토글 [toggle]

function btnClick(){ element.classList.toggle('className'); } // 클래스 이름이 생겼다 사라지다를 반복 // 두번재 인자는 boolean 타입을 받는다. element.classList.toggle('className', true);

▤ 클래스명 확인 [contains]

element.classList.contains('className'); // 특정 클래스 포함 여부를 확인. 있다면 true 없다면 false; element.classList.contains('className1 clsssName2');