CSS in Javascript
<div class="Hello">
<h1>grab me!</h1>
</div>
const h1 = document.querySelector(".hello h1")
fucntion handleTitleClick(){
const currentColor = h1.style.color;
let newColor;
if(currentColor === "blue"){
newColor = "tomato";
}else{
newColor = "blue"
}
h1.style.color = newColor;
}
h1.addEventListner("click", handleTitClick)
body{
background-color:beige;
}
h1{
color:cornflowerblue;
transition: color 0.5s ease-in-out
}
.clicked{
color:tomato;
}
const h1 = document.querySelector(".hello h1")
/*fucntion handleTitleClick(){
const clickedClass = "clicked";
if(h1.className === clickedClass){
h1.className ="";
}else{
h1.className = clickedClass;
}
}*/
/*fucntion handleTitleClick(){
const clickedClass = "clicked";
if(h1.classList.contains(clickedClass)){
h1.classList.remove(clickedClass)
}else{
h1.classList.add(clickedClass)
}
}*/
fucntion handleTitleClick(){
h1.classList.toggle("clicked");
}
h1.addEventListner("click", handleTitClick)
코딩챌린지
const bg = document.querySelector("body");
const title = document.querySelector("h1");
function handleResize() {
let bgSize = window.innerWidth;
if (bgSize >= 800) {
title.classList.add("active");
bg.style.backgroundColor = "yellow";
} else if (bgSize < 800 && bgSize >= 600) {
title.classList.add("active");
bg.style.backgroundColor = "purple";
} else {
title.classList.add("active");
bg.style.backgroundColor = "skyblue";
}
}
window.addEventListener("resize", handleResize);