javascript-classList

clssList 특징👍

 

👌add() - 클래스 이름 추가

👌remove() - 클래스 이름 삭제 *클래스가 존재하지 않을경우에 클래스를 삭제하면 오류 생김*

👌toggle() - add()와 remove() 를 함께 쓸 수 있게 함

👌contains() - 지정한 클래스가 존재하는지 확인 *true와 false 반환*

👌replace(old,new) - old클래스를 new클래스로 대체 해줌

 

toggle.html

<h1 id="title" class="OLDclass">안녕하세요</h1>
<link rel="stylesheet" href="toggle.css">
<script src=toggle.js></script>

toggle.css

h1{
    transition: color 0.5s;
}
.clicked{
    color:rgb(51, 190, 98);
}

toggle.js

const title = document.getElementById("title");
const CLICKED_CLASS = "clicked"
function handleClick(){
    title.classList.toggle(CLICKED_CLASS);
};
function init(){
    title.addEventListener("click",handleClick)
}
init();

첫화면

 

click이벤트 발생