In the previous lectures...
step 1. find the element
step 2. listen for an event
step 3. react to that event
What we are going to do is...
1. CSS에 정의된 class name들을
2. HTML element에 마크하고
3. CSS 선택자를 이용해 JavaScript 세계로 끌고 와서 toggle 기능 구현하기
#3.6 CSS in Javascript
title을 클릭할 때마다, 기존 title 텍스트 컬러가 파란색이면 토마토색으로, 토마토색이면 파란색으로 바꾸고 싶다.
const h1 = document.querySelector("div.hello:first-child h1");
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);#3.7 CSS in Javascript part Two
style - CSS
animation - JavaScript
style.css
h1 {
color: cornflowerblue
transition: color 0.5s ease-in-out;
}
.clicked {
color: tomato
.sexy-font { // 버그가 생길 여지가 있다!!
font-family: 호롤롤로;
}app.js
const h1 = document.querySelector("div.hello:first-child h1");
function handleTitleClick() {
const clickedClass = "clicked"
if (h1.className === clickedClass) {
h1.className = "";
} else {
h1.className = clickedClass;
}
}
h1.addEventListener("click", handleTitleClick);index.html
<head>
<link rel="stylesheet" href="style.css" />
<title>Momentum App</title>
</head>
<body>
<div class="hello">
<h1 class="sexy-font">Click me!</h1>
</div>
<script src="app.js"></script>
</body>#3.8 CSS in Javascript part Three
class name을 바꾸는 방법
className: 기존의 class name을 삭제한 후 대체함- classList: class들의 목록으로 작업할 수 있게 함
모든 class name을 교체하는 것이 아니라, JavaScript를 이용하여 특정한 clss name만 변경하도록 한다
clsssList.contains()
Returns true if the list contains the given argument, otherwise false
app.js
만약 clickedClass가 h1의 classList에 포함되어 있다면, clickedClass를 제거할 것이다. 포함되어 있지 않다면, clickedClass를 추가할 것이다
const h1 = document.querySelector("div.hello:first-child h1");
function handleTitleClick() {
// toggle 기능과 동일하다: classList 내 해당 class 존재여부 확인 후,
존재한다면 제거하고 존재하지 않으면 생성한다
const clickedClass = "clicked"
if (h1.classList.contains(clickedClass)) {
h1.classList.remove(clickedClass);
} else {
h1.classList.add(clickedClass);
}
}
h1.addEventListener("click", handleTitleClick);toggle 기능: 존재한다면 제거하고 존재하지 않으면 생성한다
const h1 = document.querySelector("div.hello:first-child h1");
function handleTitleClick() {
h1.classList.toggle("clicked") // 동일 string을 반복시 변수 선언 필요
}
h1.addEventListener("click", handleTitleClick);