Element.classLIst()

엘리먼트의 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