[jQuery] jquery 클래스 추가(addClass), class 추가 삭제(removeClass) 및 확인(hasClass)
class 추가나 삭제는 css에 선언된 class를 이용하여 active 효과를 줄 때 보통 많이 사용합니다.
<div class="test">테스트입니다.</div>
<button class="btn">변경</button>
- css 선언
.test.active {
color:red;
}
위의 선언은 test라는 class를 가진 DOM에 active class가 함께 있으면 color를 red로 변경하라는 선언입니다.
jQuery를 이용하여 class를 추가해 변경되는 모습을 확인해보겠습니다.
- jQuery
$(document).ready(function() {
$(".btn").off("click").on("click", function() {
// test class를 포함하는 DOM 객체가 active class를 포함하면 true 아니면 false를 반환
if ($(".test").hasClass("active")) {
// active class 제거
$(".test").removeClass("active");
}
else {
// active class 추가
$(".test").addClass("active");
}
});
});
jQuery hasClass() 함수를 통해 active 를 포함하고 있는지 확인하고
포함하고 있지 않으면 addClass() 함수를 통해 추가하고
포함하고 있으면 removeClass() 함수를 통해 삭제합니다.