all for the great 'toggle'
✦ className, classList
: className 은 특정 엘리먼트의 클래스 속성의 값을 가져오거나 설정할 수 있다.
classList 는 공백으로 구분된 문자열인 Element.className 을 통해 엘리먼트의 클래스 목록에 접근하는 방식을 대체하는 간편한 방법이다.
//className 이용
const h1 = querySelector("div.hello:first-child h1");
function handleTitleClick() {
if(h1.className === "active") {
h1.className = "";
} else {
h1.className = "active";
}
}
h1.addEventListener("click", handleTitleClick);//classList 이용
const h1 = querySelector("div.hello:first-child h1");
function handleTitleClick() {
const clickedClass = "clicked";
if(h1.classList.contains("clickedClass")) {
h1.classList.remove(clickedClass);
} else {
h1.classList.add(clickedClass);
}
}
h1.addEventListener("click", handleTitleClick);classList 메서드
-
add(String): 지정한 클래스 값을 추가한다. 만약 추가하려는 클래스가 엘리먼트의class속성에 이미 존재한다면 무시한다. -
remove(String): 지정한 클래스 값을 제거한다. -
contains(String): 지정한 클래스 값이 엘리먼트의class속성에 존재하는지 확인한다.
const h1 = querySelector("div.hello:first-child h1");
function handleTitleClick() {
const clickedClass = "clicked";
if(h1.classList.contains(clickedClass)) {
h1.classList.remove(clickedClass);
} else {
h1.classList.add(clickedClass);
}
}
h1.addEventListener("click", handleTitleClick);4. ⭐️ toggle(String), toggle(String, force) :
✧String : 토글하고 싶은 Class의 String형.
✧force : 껐다, 켰다하는 방식이 아니라, 끄거나 키거나 둘 중 하나만 되는 듯. true 로 설정되어있을 경우 클래스가 추가됨(remove안됨). 반대로 false 로 설정돼있다면 클래스가 제거됨(add안됨).
"If included, turns the toggle into a one way-only operation." - MDN
//1. toggle(String)
const h1 = querySelector("div.hello:first-child h1");
function handleTitleClick() {
//toggle이 울트라 캡짱이야...
h1.classList.toggle("clicked");
}
h1.addEventListener("click", handleTitleClick);
//2. toggle(String, force)
const h1 = querySelector(div.hello:first-child h1);
function handleTitleClick() {
//더 클릭해봐도 변한 그 상태 그대로 유지된다.
h1.classList.toggle("clicked", force);
}
h1.addEventListener("click", handleTitleClick);
참고
coding & others