[jQuery] 클래스 추가, 제거, 토글, 확인 하기 (ft. addClass, removeClass, toggleClass, hasClass)

jQeury를 기반으로 특정 요소의 class를 추가, 제거, 토글, 확인 하는 방법에 대해 알아보자.

 

각각 제목에서 언급한 것 처럼 addClass, removeClass, toggleClass, hasClass 이다.

 

▷ html

<div class="mine"></div>

이렇게 html 을 가지고 있다는 가정하에 예제 코드를 살펴보자.

 

▷ 예제1) addClass() - 클래스 추가

$('.mine').addClass('it');
// <div class="mine it">

 

▷ 예제2) removeClass() - 클래스 삭제

$('div').removeClass('mine');
// <div class>

 

▷ 예제3) toggleClass() - 클래스 토글

$('div').toggleClass('mine');
//<div class>

$('div').toggleClass('mine');
//<div class="mine">

 

toggle에 대해 잘 모를 수 있는데, 클래스를 on/off 시킨다 생각하면된다. 풀어서 쓰면 아래 코드와 같다.

if($('div').hasClass('mine')){
    $('div').removeClass('mine');
}else{
    $('div').addClass('mine');
}

 

▷ 예제4) hasClass() - 클래스 확인

$('div').hasClass('mine');
// true