#3.6~3.8

CSS in Javascript

function handleTitleClick(){
//현재 색상을 변수로 지정
const currentColor = h1.style.color;
//변화 후 색상을 변수로 지정
let newColor
if(currentColor == 'blue'){
newColor = 'tomato';
} else {
newColor = 'blue';
}
//조건문을 통한 newColor를 색상으로 지정
h1.style.color = newColor;
}

CSS in Javascript part Two

클릭할 때 class를 추가하고, 또 다시 클릭할 때 class를 제거하기 function

예시)
const clickedClass = "clicked"; //className을 잘못 입력할 오류를 방지하기 위함

if (h1.className === clickedClass) { //className이 active와 같은지 확인
h1.className = ""; //클릭하면 className 추가
} else {
h1.className = clickedClass; //
}

CSS in Javascript part Three

toggle의 기능
h1의 classList에 clicked 클래스가 있는지 확인하여
clicked 클래스가 있으면 classList에서 clicked 클래스 제거하고,
clicked 클래스가 없으면 classList에 clicked 클래스 추가하는 역할을 한다.