반응형
const h1 = document.querySelector("div.hello");
function handleTitleClick() {
const currentColor = h1.style.color;
let newColor;
if (currentColor === "blue") {
newColor = "tomato";
} else {
newColor = "blue";
}
h1.style.color = newColor;
}
h1.addEventListener("click",handleTitleClick);(===) 부등호 부호가 세 개 라면, className이 active와 같은지 확인하는 것이고,
(=)하나라면, 해당 값을 value 자리 값으로 변경해 준다.
const h1 = document.querySelector("div.hello");
function handleTitleClick() {
const clickedClass = "clicked";
if (h1.className === clickedClass) {
h1.className = "";
} else {
h1.className = clickedClass;
}
}
h1.addEventListener("click",handleTitleClick);<body>
<div class="hello">
<h1 class="sexy-font">Click me!</h1>
</div>
<script src="app.js"></script> <!--body 사이에 있고, 반드시, 경로, 이름 확인-->
</body>body {
background-color: teal;
}
h1 {
color: cornflowerblue;
transition:color .5s ease-in-out;
}
.clicked {
color: tomato;
}
.sexy-font {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
}이 모든 코드를 대체할 .toggle함수
function handleTitleClick() {
const clickedClass = "clicked";
h1.classList.toggle("clicked");
}토큰을 toggle한다. 토큰이 존재한다면 토큰을 제거하고 존재하지 않는다면 토큰을 추가한다.
'Developer' 카테고리의 다른 글
| Python의 인자, return (0) | 2022.01.03 |
|---|---|
| login input value (0) | 2021.12.29 |
| More Events (0) | 2021.12.28 |
| Events (0) | 2021.12.28 |
| serching for element 2 (0) | 2021.12.28 |