자바스크립트 21 - class 관련 정리

className : 특정 엘리먼트의 클래스 속성값을 가져오거나 설정하기 위한 속성

clasList :  className 을 통해 엘리먼트의 클래스 목록에 접근하는 방식을 대체하는 방법

clasList.add(class) : 엘리먼트에 클래스 속성값을 추가하기 위한 메서드

clasList.remove(class) : 엘리먼트에 클래스 속성값을 제거하기 위한 메서드

clasList.toggle(class, true|false) : 엘리먼트에 클래스 속성값을 추가/제거하기 위한 메서드

 

---

 

let elem  = document.querySelector('#item');

if(elem.className ==='on'){

        elem.className = 'off';

}else{

      elem.className ='on';

}

 

---

elem.classList.add('on');

elem.classList.remove('on');

elem.classList.toggle('on');

---

btn.onclick = function(){

      elem.classList.toggle('on');

}

 

---

ref] www.w3schools.com/jsref/prop_element_classlist.asp