[JS] classList.toggle()로 클래스를 추가·제거하자

 

 

 

 

 

 

 

toggle

토글(toggle)이란 하나의 설정 값으로부터 다른 값으로 전환하는 것이다. 토글이라는 용어는 오직 두 가지 상태밖에는 없는 상황에서, 스위치를 한번 누르면 한 값이 되고, 다시 한번 누르면 다른 값으로 변하는 것을 의미한다.

 

 

 

 

 

DOMTokenList: toggle()

DOMTokenList 인터페이스의 toggle()은 목록에서 기존 토큰을 제거하고 false를 반환한다.

토큰이 존재하지 않으면 추가되고 true를 반환한다.

 

toggle(token)
toggle(token, force)

• token : 전환하려는 토큰을 나타내는 문자열
• force : 토글을 단방향 작업으로 바꾼다. false로 설정하면 토큰이 제거만 되고 추가되지는 않는다. true로 설정하면 토큰이 추가되기만 하고 제거되지는 않는다.

 

 

 

 

classList: toggle()

$body = document.querySelector(body)

const onClick = () => {
	$body.classList.toggle('show')
}

$body.addEventListener('click', onClick)

• body 클릭 시, body의 'show' 클래스 추가 / 제거가 반복적으로 이루어진다.