[JavaScript] 자바스크립트에서 요소 클래스 유/무효화하기

151_자바스크립트에서 요소 클래스 유/무효화하기

[적용]

• 요소의 클래스를 동적으로 다루고 싶을 때

---

[문법]

메소드	의미	반환
요소.classList.toggle(클래스)	클래스 전환	없음

---

[내용]

classList.toggle()은 설정된 클래스를 추가하거나 제거할 수 있다.

1초마다 클래스를 전화하는 예시를 확인해 보자.

setInterval(() => {
  box.classList.toggle('red');
}, 1000);

---

[예시]

버튼 클릭으로 표시 내용을 전환하는 예시안을 확인해 보자.

.button 요소를 클릭하면 .contnt 요소의  show 클래스를 표시하거나 제거한다.

show 클래스가 설정된 상태에서만 .content 요소가 표시된다.

 

HTML                                                                                                                                                              index.html

<section>
  <button class="button">HTML</button>
  <div class="content">
    <p>HyperText Markup Language의 단축어, 웹에서 사용하는 마크업 언어</p>
    ...생략...
  </div>
</section>
<section>
  <button class="button>CSS</button>
  <div class="content">
    ...생략...
  </div>
</section>
<section>
  <button class="button">JavaScript</button>
  <div class="content">
   ...생략...
  </div>
</sectoion>

CSS                                                                                                                                                                      style.css

.button + .content {
  display: none;
  ...생략...
  font-size: 20px;
}

.button + .content.show {
  display: block;
}

JavaScript                                                                                                                                                          main.js

// 모든 .button 요소 처리
document.querySelectorAll('.button').forEach((button) => {
  // .button 요소 클릭 시 처리 설정
  button.addEventListener('click', () => {
    // .button 다음 요소의 클래스 전환
    button.nextElementSibling.classList.toggle('show');
  });
});

 

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김