"버튼 클릭하면 스타일 바뀌게 하고 싶다면? classList.add & remove 배우기"

▶ 이 명령어가 뭐하는 건지

• classList.add('클래스이름')
  → 해당 요소에 클래스를 추가함
• classList.remove('클래스이름')
  → 해당 요소에서 클래스를 제거함

→ HTML의 class="..." 안에 있는 클래스들을 자바스크립트로 쉽게 조작하는 기능

 

▶ 명령어 문법

element.classList.add("클래스이름", ...);
element.classList.remove("클래스이름", ...);

 

 

• element: 클래스를 추가/제거할 HTML 요소
• "클래스이름": 추가하거나 지울 클래스의 이름 (문자열)
• 여러 개 한꺼번에 넣을 수도 있음.

▶ 파라미터 (매개변수)

 

• 하나 이상의 클래스 이름 (문자열)
• 예: "active", "hide", "red" 등
• 여러 개 넣으면 한 번에 적용됨

element.classList.add("bold", "red", "big");

 

 

 

▶ 주로 어떻게 쓰는지

 

• 버튼 클릭 시 요소 숨기기/보이기
• 스타일을 바꿀 때
• 활성화(active), 비활성화 상태 표시
• 에러, 성공 메시지 상태 제어

▶ 예시

예시 HTML

<button id="btn">숨기기</button>
<div id="box" class="box">이 박스를 숨기고 보여요</div>

<style>
  .hide {
    display: none;
  }
</style>

 

예시 JS

const btn = document.getElementById("btn");
const box = document.getElementById("box");

btn.addEventListener("click", () => {
  box.classList.add("hide");   // 박스를 숨김
  // box.classList.remove("hide"); // 다시 보이게 하고 싶을 땐 remove 사용
});

 

 

✅ 추가로 알아두면 좋은 메서드