Html 요소들마다 classList 작업해서 변화를 줘야 될떄마다 유용하게 쓸수있는 메소드입니다.
classList.toggle()
토글이란?
- on/off switch의 개념으로 스위치를 켯다, 껏다 하는 기능을 가지고 있습니다.
- add() / remove() 메서드를 한번에 쓸 수 있는 합쳐진 개념입니다.
즉 click 이벤트에 classList.toggle() 추가시켜서 css에 style줘서 구현시킵니다.
ex :
add()
classList.add()
add란?
지정한 요소에 클래스 값을 추가시키는것입니다.
ex :
remove()
classList.remove()
remove란?
지정한 요소에 클래스 값을 제거시키는것입니다.
ex :
전체적인 classList 예제는
https://cometruedream.tistory.com/95
'JavaScript' 카테고리의 다른 글
| scroll할때 progress bar 표시 (3) | 2022.07.29 |
|---|---|
| 자바스크립트 innerHtml vs innerText (1) | 2022.07.28 |
| javascript 쉽게 구현하는 아코디언(accodion) (1) | 2022.07.27 |
| 타임제한을 만들어봐요!!!! (2) | 2022.05.18 |
| Javascript null , undefind , empty 체크시 좋은 코딩방법 (2) | 2022.03.18 |