[JS] 자바스크립트로 HTML 클래스 제어하기

 

 

<JavaScript로 클래스 제어하기>

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

 

 

1. 클래스 추가 

 - 여러개의 클래스를 추가하는 경우 클래스 사이에 ,가 들어감 

element.classList.add('class1');
element.classList.add('class1', 'class2')

 

 

2. 클래스 제거

 - 여러개의 클래스를 추가하는 경우 클래스 사이에 ,가 들어감 

element.classList.remove('class1');
element.classList.remove('class1', 'class2')

 

 

3. 클래스 교체

element.classList.replace('oldClass', 'newClass');

 

 

4. 클래스 존재여부 확인 (반환값: boolean)

 - 여러개의 클래스를 확인하는 경우 하나라도 일치하지 않을 경우 false 반환

element.classList.contains('class1'); 
element.classList.contains('class1', 'class2');

 

 

5. 클래스 토글

element.classList.toggle('class1');
element.classList.toggle('class1', true);
element.classList.toggle('class1', false);

 

 

(+) 특정 element의 onclick 태그에 새로운 함수를 반영해줘야하는 경우

document.getElementById("element").onclick = function() { 함수구현 };