[JavaScript] 자바스크립트 classList 사용방법

---

일단 classList 가 무엇인지 알아야겠다.

 

---

Method

 

 

classList의 특성은 읽기 기능의 특성이라고 보면된다.

 

사용가능한 속성으로는 

 

add, remove, toggle 이 세가지가 있다.

 

add는 class 를 추가 하는것

 

remove는 class 제거 하는 것

 

toggle은 추가 제거 하는 것.

 

add

 

 

사용법은 간단하다.

 

 

 

다음 적어 놓을 부분을 유심히 보면 되겠다.

 

저렇게 사용하면 

 

 

 

 

개발자 모드본 결과

 

newButton.classList.add(); 로 인해

 

class 안에 

 

class1, class22, class55 

 

요소가 생성 된 것을 확인 할 수 있다.

 

 

revmove는 간단해서 생략하겠다.

 

 

toogle

 

 

토글 기능은 말 그래도

 

추가 하였다가, 제거 하도록 하는 기능이다.

 

 

 

 

this.classList.toggle("on");

 

이 한줄을 통해서 

 

 

 

 

 

class에 on이 추가되었다가

 

 

 

사라지는 것을 볼 수 있다.

 

아 물론. 토글 기능은

 

버튼 같이 껏다 키는 

 

객체 어울린다.

 

 

이것을 이용해서

 

우리는 이제 다양한 자바스크릡트

 

응용 API를 만들어 볼 수 있을 것이다.

 

---

 

 

To be continue..