<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css"> //css파일 연결
<title>Hello from HTML!</title>
</head>
<body>
<div class="hello">
<h1 class="sexy-font">Click Me!</h1>
</div>
<script src="app.js"></script> //js파일 연결
</body>
</html>
body{
background-color: beige;
}
h1{
color: blue;
transition: color.5s ease-in-out;
}
.clicked{ /*clicked라는 이름의 클래스 생성*/
color: tomato;
}
.sexy-font{
font-family: 'Courier New', Courier, monospace;
}
const h1 = document.querySelector(".hello h1");
function mouseClick(){
const clickedClass = "clicked sexy-font"; //string을 변수에 저장해서 이름 잘못쳐서 에러날수 있는거 방지
if(h1.className === clickedClass){ //className이 getter이자 setter임
h1.className = "";
}else{
h1.className = clickedClass;
}
}
h1.addEventListener("click",mouseClick);
- 마우스를 클릭하면 h1의 className이 clickedClass(할당된)라는 Class가 생성됨
- 한번 더 클릭하면 h1의 className은 공백이 됨
- 근데 애초에 h1에 sexy-font라는 class가 존재한다면 클릭이벤트를 발생했을때 sexy-font를 없애고 clicked로만 냅다 할당해버림 -> 그래서 sexy-font의 css는 무시됨
- 그래서 clickedClass = "clicked sexy-font"라고 써준거
