classList의 toggle 메소드 for ON/OFF의 간편한 구현 in JS

horiz.d·2021년 11월 19일
0

toggle 메소드

toggle은 classList의 메소드 중 하나이며 ON/OFF와 같은 동작을 용이하게 해준다.


사용법

object.classList.toggle("className");

동작

토글 메소드는 아래와 같은 동작을 수행한다.

STEP1 )

.contains("className") : 인자로 받은 클래스가 object가 가지는 classList에 존재하는지 확인한다.

STEP2 )

.remove("className") : 만약 classList에 인자로 받은 class가 존재할 경우 해당 클래스를 삭제한다.

OR

.add("className") : 만약 classList에 인자로 받은 class가 존재하지 않을 경우 해당 클래스를 추가한다.





위의 동작과 같이 ON/OFF 구현을 위한 총 세개의 메소드를 압축하여 수행해주는 classList가 바로 toggle 메소드이다.
profile
가용한 시간은 한정적이고, 배울건 넘쳐난다.

0개의 댓글