JS - addClass, removeClass, hasClass

addClass , removeClass

• addClass : 클래스 추가
• removeClass : 클래스 제거

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<button class="btn-1">배경색 변경</button>

• body에 active 클래스가 추가가 되면 배경색이 파란색으로 변경된다.

CSS

body.active {
  background-color: red;
}

• body에 .active 클래스를 CSS에만 부여하고 JS에서 addClass, removeClass로 .active를 추가 / 제거해 css속성을 변경할 수 있게 한다.

JS

$(".btn-1").click(function () {
  $("body").addClass("active");
});

$(".btn-2").click(function () {
  $("body").removeClass("active");
});

• 배경색 변경을 클릭하면 body에 active클래스가 추가되면서 배경색을 바꾼다.
• 배경색 복구를 클릭하면 body에 active클래스가 제거되면서 원래 배경색으로 복구된다.

---

hasClass

• hasClass : 특정 클래스가 존재하는지 확인

console.clear();

$(".btn-1").click(function () {
  let has = $("div").hasClass("active");

  if (has) {
    $("div").removeClass("active");
  } else {
    $("div").addClass("active");
  }
});

• 변수 has를 만들고 그 안에 div가 active클래스를 가지고 있는 걸로 선언한다.

• if문을 활용하여 has가 참이면 div에 active클래스를 제거하고, 거짓이면 div에 active클래스를 추가한다.