227. 클래스변경

클래스 추가, 삭제

1. 추가

$('선택자').addClass('클래스명')

2. 삭제

$('선택자').removeClass();

=> 모든 클래스를 삭제한다.


$('선택자').removeClass('클래스');

=> 클래스 한 개 삭제


$('선택자').removeClass('클래스명 클래스명 클래스명')

=> 삭제할 클래스가 여러 개 일 때 사용

• 체이닝 : 선택자가 같으면 함수끼리 . 을 이용하여 붙여서 사용한다.

$('#btn_red').click(function(){
  (#btn_red 를 클릭했을 때의 기능)
   
  $('box').addClass('red').removeClass('green').removeClass('blue');
  (box 클래스에 red 라는 클래스를 추가하고, green , blue 클래스를 삭제한다.
   
  $('#btn_green').click(function(){
    (#btn_green을 클릭했을 때의 기능)

    $('#box').removeClass('red'); 
    $('#box').addClass('green');
    $('#box').removeClass('blue');
    })
  	(green 클래스를 추가하고 red, blue 클래스를 삭제한다.)
  
  $('#btn_blue').click(function(){
    (#btn_blue)를 클릭했을 떄의 기능
     
    $('#box').removeClass('red'); 
    $('#box').removeClass('green');
    $('#box').addClass('blue');
    })
  (blue 클래스를 추가하고 red, green 클래스를 삭제한다.
})