JavaScript / Class 제어하기

리엑트로 퍼블리싱중이다.

아직 나에게는 제이쿼리가 익숙하지만 요즘 잘 안쓴다길래 바닐라스크립트로하려고기본중에 기본인 클래스 제어하는걸 공부해봤다.

 

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

 

1. 클래스 추가

element.classList.add('class1'); // 1개 추가 
element.classList.add('class1', 'class2') // 여러개 추가

 

2. 클래스 제거

element.classList.remove('class1'); // 1개 제거
element.classList.remove('class1', 'class2') // 여러개 제거

 

3. 클래스 교체

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

 

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

element.classList.contains('class1'); 
element.classList.contains('class1', 'class2'); // 여러개: 한 개라도 일치하지 않으면 false 반환

 

5. 클래스 토글

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