엘리먼트의 class목록을 list형태로 가져와서 활용할 수 있도록 하는 메서드.
이것을 이용하면 원하는 엘리먼트에서 class 추가, 제거, 교체 등이 용이하다.
특히, toggle메서드는 굉장히 유용.
const body = document.querySelector('body');
function handleSize(){
if(window.innerWidth > 1000){
body.classList.add('big');
}else if(window.innerWidth < 600){
body.classList.add('small');
}else{
body.classList.remove('big', 'small');
}
}
// function handleSize(){
// body.classList.toggle('big', window.innerWidth > 1000);
// body.classList.toggle('small', window.innerWidth < 600);
// }
window.addEventListener('resize', handleSize);
위에서 if를 사용했을 경우 7줄이었는데 toggle을 사용하여 2줄만에 끝냈다.
참고
Element.classList
Element.classList는 엘리먼트의 클래스 속성의 컬렉션인 활성 DOMTokenList를 반환하는 읽기 전용 프로퍼티이다.
developer.mozilla.org
'JavaScript' 카테고리의 다른 글
Date() (0) | 2020.02.01 |
---|---|
setInterval() (0) | 2020.02.01 |
RGB와 HEX (0) | 2020.01.30 |
JavaScript Event (0) | 2020.01.29 |
querySelector() (0) | 2020.01.29 |
댓글