🗓 진행일: 3월 11일
📎 3.6 ~ 3.8
3.6 CSS in Javascript
- div 내 h1을 클릭했을 때 색상을 변경하게 하는 방법
- querySelector로 div의 h1 받아오기
- click을 이벤트 핸들러로 받아오기
- color = h1.style.color;
app.js
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
생긴 거 변경하는 건 css 파일에서 하자
각자의 역할이 있으니까, UI 변경은 css 파일에서 하도록 할 순 없을까?
--> 클래스 이름으로 관리하기
--> 클래스 이름을 가져와서 그게 맞으면, 지우고, 없으면 넣고
app.js
function handleTitleClick() {
const clickedClass = "clicked";
if(h1.className === clickedClass) {
// 로직
} else {
// 로직
}
}style.css
.clicked {
color: tomato;
}index.html
<body>
<div class="hello">
<h1 class="sexy-font">Click me!</h1>
</div>
</body>3.8 CSS in Javascript part Three
근데 만약에 내가 갖고 있는 클래스가 여러 개라면?
그걸 지웠다가 다시 넣을 건가요?
--> classList를 사용해서 갖고 있는 class를 array로 가져온다
--> contains로 포함되어 있는지 체크!
app.js
function handleTitleClick() {
const clickedClass = "clicked";
if(h1.classList.contains(clickedClass)) {
h1.classList.remove(clickedClass);
} else {
h1.classList.add(clickedClass);
}
}그걸 걍 쉽게 해결하는 방법 = toggle
- toggle? class가 있으면 제거하고, 없으면 추가하는 함수
function handleTitleClick() {
h1.classList.toggle("clicked");
}
자존감은 일상의 성실함으로부터 온다