[jQuery] 클래스 추가, 삭제, 토글

jQuery를 이용하여

클래스를 추가, 삭제하고

토글 하는 방법입니다.

 

클래스 추가 - addClass

<div id='myDiv'>안녕하세요</div>

.bg-yellow {
  background-color: yellow;
}

$("#myDiv").addClass("bg-yellow")

$("myDiv").addClass("bg-yellow");

id가 myDiv인 요소에

bg-yellow 클래스를 추하여,

div의 배경색이 노란색으로 변경되었습니다.

 

 

클래스 삭제 - removeClass

<div id='myDiv' class="bg-yellow">안녕하세요</div>

.bg-yellow {
  background-color: yellow;
}

$("#myDiv").removeClass("bg-yellow")

 

$("#myDiv").removeClass("bg-yellow")

이번 예제의 html을 보면 bg-yellow 클래스가 적용된 상태입니다.

여기서 removeClass()를 이용하여,

myDiv에 적용된 bg-yellow 클래스를 삭제하였습니다.

배경색이 노란색이 아닙니다.

 

 

 

클래스 토글 - toggleClass

<div id='myDiv' class="bg-yellow">안녕하세요</div>
<button id='myBtn'>토글</button>

.bg-yellow {
  background-color: yellow;
}

// 버튼을 클릭하면
$('#myBtn').click(function() {
  // 배경색이 토글됩니다.
  $('#myDiv').toggleClass('bg-yellow')
})

 

$('#myDiv').toggleClass('bg-yellow')

toggleClass()는 

파라미터로 전달된 클래스가 이미 적용되어 있으면 삭제하고,

적용되어 있지 않으면 추가합니다.

위 예제는 버튼을 클릭할 때마다,

bg-yellow 클래스가 추가되었다, 삭제되었다를 반복합니다.