#2.5 CSS in Javascript

CSS in Javascript

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);

 

---

**

- raw string이 반복되면 상수로 만들어 주자.

 

JS는 string이 오타나면 오류라고 알려주지 않는다.

하지만, 변수명이 오타나면 오류라고 알려준다.

 

 

---

what is toggle

- toggle 사용 전

const h1 = document.querySelector("div.hello:first-child h1");

function handleTitleClick() {
	const clickedClass = "clicked";
    
    // h1의 classList에 class name이 포함되었다면,
    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");
}

h1.addEventListener("click", handleTitleClick);

-> h1의 classList에 clicked class 가 이미 있는지 확인

-> 있다면, toggle이 clicked를 classList에서 제거해줌.

-> 없다면, toggle이 clicked를 classList에서 추가해줌.