JS - className(), classList()

h1 {
    color: cornflowerblue;
}
.clicked {
    color: tomato;
}

className

이전 클래스와 상관없이 모든 걸 교체해버림

 

• 클래스 이름 변경

element.className = "변경할 이름";

 

• 클래스 이름 추가

기존 클래스에 값을 추가

앞에 space도 같이 추가해줄 것

element.className += " 추가할 이름";

---

function handleClick() {
    const.clickedClass = "clicked"
    if (h1.classList === clickedClass){
    	h1.className = "";
    } else {
    	h1.className = clickedClass;
    }
}

h1.addEventListener("click", handleClick);

 

classList

클래스들의 목록으로 작업 가능

 

메소드

contains : 지정한 클래스 값이 element 속성에 존재하는지 확인 (true/false)

element.classList.contains("이름");

remove : 지정한 클래스 값을 제거

element.classList.remove( String[ , string[,...]] )

add : 지정한 클래스 값 추가

element.classList.add("이름");

replace : 지정한 클래스 값을 새로운 클래스로 교체

element.classList.replace("기존 클래스명", "변경 클래스명");

toggle : 클래스 목록에 해당 클래스가 있으면 제거하고 없으면 추가

element.classList.toggle("class 이름")

---

function handleClick() {
	const clickedClass = "clicked";
    if (h1.classList.contains(clickedClass)) {
    	h1.classList.remove(clickedClass);
    } else {
    	h1.classList.add(clickedClass);
    }
}
h1.addEventListener("click", handleClick);

toggle 이용 시

function handleClick() {
    const clickedClass = "clicked";
    h1.classList.toggle(clickedClass);
}

h1.addEventListener("click", handleClick);