728x90
반응형
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>3-6</title>
</head>
<body>
<h1 style="color:blue; font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;">CSS in JavaScript!</h1>
</body>
<script src="../js/3-6.js"></script>
</html>
const h1 = document.querySelector("h1")
function handleTitleClick(){
const currentColor = h1.style.color; //currentColor는 getter로 최근 color값을 복사한다.
let newColor; //setter, 변수에 대입된 값을 최종적으로 h1.style.color에 할당시킴
if (currentColor === "blue"){
newColor = "tomato";
}
else{ newColor = "blue";
}
h1.style.color = newColor;
}
h1.addEventListener("click",handleTitleClick);
- click event 발생 및 함수 실행
- currentColor 변수 선언 후 h1.style.color 값 복사 (getter)
- newColor 변수 선언
- currentColor 현재 값 확인
- 조건에 따라 newColor에 "tomato" or "blue" 값 대입
- 마지막으로 h1.style.color에 newColor값 대입 (setter)
728x90
반응형
'JavaScript' 카테고리의 다른 글
| Data Type (0) | 2023.04.24 |
|---|---|
| Return (0) | 2023.04.24 |
| Event (0) | 2023.04.24 |
| 축약연산자 (0) | 2023.04.23 |
| date, setInterval, localStorage (0) | 2023.04.14 |
댓글