JS - toggle

 자바스크립트에서 toggle() 메소드는 on/offf 할 수 있도록 즉 스위치를 켰다 껐다 하는 기능을 한줄로 구현할 수 있다.

 

예를 들면 아래와 같이 click 이벤트에 classList()를 사용하여 css style을 on/off 방식으로 추가/제거 할 수 있게된다.

아래의 예제코드를 확인해보자.

 

function handleh1Clicked(){
    const clickedClass = "clicked";
    if( h1.classList.contains(clickedClass)){
        h1.classList.remove(clickedClass);
    }else{
        h1.classList.add(clickedClass);
    }
    
}

위와 같이 원하는 HTML문서내의 태그가 classList에서 clicked 클래스를 가지고 있는지 확인하고(contains)

remove, add를 통해서 토글기능을 구현해야한다.

 

하지만 toggle() 메소드를 사용하면 아래와 같이 코드한줄로 끝낼 수 있다.

 

function handleh1Clicked(){
	h1.classList.toggle("clicked");
}