바닐라JS - CSS in JavaScript

CSS와 JavaScript는 분리시켜주는게 좋음

style.css

h1 {
	color: cornflowerblue;
}
.active {
	color: tomato;
}

app.js

function handleTitleClick() {
  const clickedClass = "clicked"
  //이름이 바뀌면 매번 코드를 수정해야 하므로 string을 변수에 저장해주는게 더 좋다.
  if (className === clickedClass) {
    h1.className = "";
  } else {
    h1.className = clickedClass;
  }
}

원래 class는 건들지 않고 새로운 class 추가하는 코드

app.js

function handleTitleClick() {
  const clickedClass = "clicked"
  //이름이 바뀌면 매번 코드를 수정해야 하므로 string을 변수에 저장해주는게 더 좋다.
  if (h1.classList.contains(clickedClass)) {
    h1.classList.remove(clickedClass);
  } else {
    h1.classList.add(clickedClass);
  }
}

toggle

토큰이 존재하면 토큰을 제거하고 존재하지 않는다면 토큰을 추가한다.

toggle로 작성한 코드 (기능은 위와 같음)

toggle은 h1의 classList에 clicked class가 이미 있는지 확인해서
만약 있다면 toggle이 clicked class를 제거해줌.
만약 존재하지 않는다면 toggle이 classList에 clicked class를 추가해줌.

app.js

function handleTitleClick() {
  h1.classList.toggle("clicked"); //단 한줄로 끝낼 수 있음
}