Element.classList.add 자바스크립트로 클래스 추가하기(JavaScript)

*{

float: left;

}

#container1, #container2{

margin: 30px 30px;

text-align: center;

width: 100px;

height: 100px;

border: 2px solid black;

color: black;

}

<div id="container1"></div>

<div id="container2"></div>

<script>

const divTag1 = document.getElementById("container1");

const divTag2 = document.getElementById("container2");

function handleOnclick1() {

divTag1.classList.add("HelloClass"); // 클래스 하나

}

function handleOnclick2() {

divTag2.classList.add("class1", "class2", "class3"); // 클래스 여러개

}

divTag1.addEventListener("click", handleOnclick1);

divTag2.addEventListener("click", handleOnclick2);

</script>

클릭시 클래스 추가하는 로직

classList.add('클래스명') 클래스 하나 추가

classList.add('클래스명a', '클래스명b', '클래스명c',) 클래스 여러개 추가