js로 css의 스타일을 수정하기 위해서 요소.style.속성명을 사용해야한다.

▶ CSS 속성에 접근하고 수정하기

버튼을 클릭했을 때 글자의 배경색과 innerText을 사용하여 내용을 수정해보자

// html
    <div
      class="display-container d-flex justify-content-center align-items-center text-center flex-column">
      <h1 class="fortune">오늘 당신의 운세는!!</h1>
      <button class="btn">확인하기</button>
    </div>

// js
const fortune = document.querySelector(".fortune");
const btn = document.querySelector(".btn");

btn.onclick = () => {
  fortune.style.backgroundColor = "green";
  fortune.style.color = "white";
  fortune.innerText = "좋은 일이 가득할 것입니다!";
  btn.innerText = "♥";
};

---

▶ classList 프로퍼티

js를 사용하면 필요할 때마다 classList 프로퍼티에 클래스 스타일을 추가하거나 삭제하면서 여러가지 효과를 지정할 수 있다.

classList 프로퍼티는 DOM에서 자주 사용되며, 요소에 적용한 스타일을 모두 모아 놓은 프로퍼티이다.

▷ 클래스 스타일을 추가하는 add()

클래스 스타일을 추가할 때는 add() 함수를, 삭제할 때는 remove() 함수를 사용한다.

요소.classList.add(클래스명)
요소.classList.remove(클래스명)

css에 적용할 스타일을 미리 .clicked이라는 이름으로 만들어 두자.

// css
.clicked {
  background-color: green;
  color: white;
}

// jsx
const fortune = document.querySelector(".fortune");
const btn = document.querySelector(".btn");

btn.onclick = () => {
  fortune.classList.add("clicked");
  fortune.innerText = "좋은 일이 가득할 것입니다!";
  btn.innerText = "♥";
};

결과는 같지만 위 코드는 클릭했을 때의 클래스 스타일을 미리 만들어두고 클릭하면 미리 만들어 둔 스타일을 적용하는 방식이다.
이처럼 클릭했을 때 스타일만 바뀐다면 add() 함수를 많이 사용한다고 한다.

▷ 특정 클래스 스타일이 있는 요소를 찾아주는 contains()

앞서 살펴본 코드들에는 버튼을 클릭했을 때 스타일은 바뀌지만, 원래대로 되돌리는 기능은 없다.
따라서 클래스 리스트에 특정 리스트가 있는지 확인하는 contains() 함수를 사용하여 구현해보자.

contanins() 함수를 이용해서 .clicked 스타일이 있는지 확인한 후 없으면 clicked를 추가하고, 있으면 clicked를 삭제할 것이다.

const fortune = document.querySelector(".fortune");
const btn = document.querySelector(".btn");

btn.onclick = () => {
  if (!fortune.classList.contains("clicked")) {
    fortune.classList.add("clicked");
  } else {
    fortune.classList.remove("clicked");
  }
  fortune.innerText = "좋은 일이 가득할 것입니다!";
  btn.innerText = "♥";
};

// css
.clicked {
  background-color: green;
  color: white;
}

▷ 클래스 스타일 토글하기

클릭할 때마다 특정 클래스를 추가하거나 삭제하기를 반복하는 경우에는classList의 toggle() 함수를 사용하는 것이 더 편리하다.

요소.classList.toggle(클래스명)

앞에서 contains(), add(), remove() 함수를 사용해서 작성했던 코드를 toggle() 함수로 간단히 바꾸어보자.

// js
const fortune = document.querySelector(".fortune");
const btn = document.querySelector(".btn");

btn.onclick = () => {
  fortune.classList.toggle("clicked");
  fortune.innerText = "좋은 일이 가득할 것입니다!";
  btn.innerText = "♥";
};

toggle()을 사용하여 버튼 클릭시 다크 모드로 바꾸어보자!

// html
    <div class="display-container d-flex justify-content-center align-items-center text-center flex-column">
      <h1 class="text">
        정말 행복한 하루에요! 모두 건강하시고<br />오늘도 좋은 하루 보내시길
        바랍니다!
      </h1>
      <button class="btn">🌙</button>
    </div>

// css
.dark {
  background-color: black;
  color: white;
}

// js
const btn = document.querySelector(".btn");

btn.onclick = () => {
  document.body.classList.toggle("dark");
  if (btn.innerText === "☀️") {
    btn.innerText = "🌙";
  } else {
    btn.innerText = "☀️";
  }
};