[Vanilla JS] CSS in Javascript

CSS in Javascript

  <div class="hello">
    <h1>Click me!</h1>
  </div>

const title = document.querySelector(".hello h1");

function handleTitleClick() {
    const currentColor = title.style.color;
    let newColor;

  if(currentColor == "blue") { // true or false
    newColor = "tomato";
  } else {
    newColor = "blue";
  }
  title.style.color = newColor; // 함수 조건 적용
}

title.addEventListener("click", handleTitleClick);

 CSS 의 기능을 Javascript 에서도 관리할 수가 있습니다만, 본 포스트는 CSS 를 Javascript 에서도 관리할 수 있다는 기초 이론의 정리만을 목적으로 작성하였습니다.

 

 때문에 CSS 가 기본적으로 스타일을 담당하는 프로그래밍의 기준인 만큼 CSS 에서 할 수 있는 작업은 CSS 에서 하는 것을 권장합니다.

 

---

 

Toggle

// source code 1

  const clickedClass = "clicked";
  if(h1.classList.contains(clickedClass)) {
    h1.classList.remove(clickedClass);
  } else {
    h1.classList.add(clickedClass);
  }

// source code 2

  h1.classList.toggle("clicked");

 Toggle(0과 1을 반복하는) 기능을 구현하기 위해 1번 소스코드와 같이 직접적으로 기능을 구현할 수도 있지만, 브라우저에서는 기본적으로 toggle 기능을 지원하고 있기 때문에 2번 소스코드와 같이 작성합니다.