classList 사용법
•
classList를 사용하여 element의 class를 사용하는 방법
•
classList는 읽기전용 속성으로 css class의 현재 값을 반환한다
const classes = element.classList;
JavaScript
복사
•
classList는 DOMTokenList 객체도 element의 class 속성을 보여준다.
•
classList가 읽기전용이어도 다양한 메소드를 통해 class 목록을 조작할 수 있다.
let div = document.querySelector('#content');
for (let cssClass of div.classList) {
console.log(cssClass);
}
JavaScript
복사
element의 CSS class 목록 가져오기
ex) 두개의 클래스(main, red)를 가진 div element가 있다고 가정
<div id="content" class="main red"> js classList</div>
JavaScript
복사
→ 다음은 div element의 class 목록을 콘솔에 출력하는 코드
let div = document.querySelector('#content');
for (let cssClass of div.classList) {
console.log(cssClass);
}
JavaScript
복사
→ 먼저 querySelector() 메소드를 통해 id가 content인 div element를 가져온다
→ 그 다음 element의 classList에 루프를 돌려 각각의 클래스명을 콘솔에 출력한다
하나 이상의 class를 추가하기
element의 class 목록에 하나 이상의 css class를 추가하려면 classList의 add() 메소드를 사용해야한다
ex) info class를 id가 content인 div element에 추가하는 코드
let div = document.querySelector('#content');
div.classList.add('info');
JavaScript
복사
→ element의 class 목록에 여러개의 css class를 추가하는 코드
let div = document.querySelector('#content');
div.classList.add('info', 'visible', 'block');
JavaScript
복사
element의 class 삭제하기
element의 css class를 삭제하기 위해서는 remove() 메소드를 사용한다. 또한 add() 메소드와 마찬가지로 여러개의 클래스명을 한번에 제거할 수도 있다
// remove only
let div = document.querySelector('#content');
div.classList.remove('visible');
// remove multiple
let div = document.querySelector('#content');
div.classList.remove('block', 'red');
JavaScript
복사
element의 class 교체하기
현재 존재하는 css class를 새로운 것으로 교체하기 위해서는 replace() 메소드를 사용한다.
info class를 warning class로 바꾸기
let div = document.querySelector('#content');
div.classList.replace('info', 'warning');
JavaScript
복사
특정 class가 존재하는지 확인
element가 특정 class를 가지고 있는지 확인하기 위해서는 contains() 메소드를 사용한다. contain() 메소드는 classList에 특정한 class가 존재하면 true를 반환하고 아니면 false를 반환한다.
let div = document.querySelector('#content');
div.classList.contains('warning');
JavaScript
복사
class 토글하기
만약 element의 class 목록에 특정 class명이 들어있다면, toggle() 메소드는 그 class명을 지운다.
만약 class 목록에 그 class명이 없다면 toggle() 메소드는 그 class를 element의 class 목록에 추가한다.
ex) toggle() 메소드를 사용해 id가 content인 element에 visible class를 토글하는 코드이다
let div = document.querySelector('#content');
div.classList.toggle('visible');
JavaScript
복사
Summary
•
element의 classList 속성은 element의 현재 css class 목록을 반환할 수 있다
•
add()와 remove() 메소드를 사용해 element의 css class 목록에 추가, 삭제 작업을 할 수 있다
•
replace() 메소드는 현재 존재하는 class를 새로운 class로 바쑬 수 있다
•
contains() 메소드는 element의 class 목록에 특정 class가 있는지 확인할 수 있다
•
toggle() 메소드는 class를 토글할 수 있다