본문 바로가기
JavaScript

Element.classLIst()

by ma_ro 2020. 1. 30.

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

댓글