[jQuery] class 제어하기

웹을 작성하다 보면 Class를 변경하여 효과를 변형시키고자 할때가 있습니다.

 

이럴때 유용하게 사용 할 수 있는 jQuery에서의 Class를 변경하는 방법에 대하여 알아보겠습니다.

 

 

먼저 jQuery에서 Class를 변경하는 메소드에 대하여 살펴보겠습니다.

 

//Class 추가

$('#element').addClass('class_name');

 

$('#element').removeClass('class_name');

$('#element').removeClass('class_name');

 

//Class 교체

$('#element').removeClass('old_class').addClass('new_class');

 

//Class 토글

$("#element").toggleClass('old_class new_class');

 

//Class 새로 지정

$("#element").attr('class', 'new_class'); 

 

 

addClass : 이 메소드는 저정한 클래스명을 현재의 클래스 뒤에 하나 더 추가합니다.

 

예를 들어 <Div id='div1' class='class'></div>라는 HTML 이 있다고하면 $('#div1').addClass('class2'); 를 실행한 결과는 <Div id='div1' class='class class2'></div> 가됩니다.

 

removeClass : 이 메소드는 지정한 클래스명을 현재의 클래스에서 삭제합니다.

 

위의 두 클래스를 연속적으로 사용하여 클래스명을 바꿀 수 있습니다.

 

예를 들어 <Div id='div1' class='class'></div>라는 HTML 이 있다고하면 $('#div1').removeClass('class').addClass('class2'); 를 실행한 결과는 <Div id='div1' class='class2'></div> 가됩니다.

 

toggleClass : 이 메소드는 단독으로 움직이지는 않습니다. Click 이벤트와 함께 사용할면 클릭시마다 지정한 클래스 명으로 토글합니다.

 

attr : 이 메소드는 정확하게 이야기하면 Class만을 교체하는 것은 아닙니다. attr은 전체적인 태그의 속성을 제어합니다.

 

$("#element").attr('class', 'new_class');로 Class명을 바꾸면 Class를 모두 지우고 새로 작성하는 혀과를 줍니다.

 

$('#element').removeClass('old_class').addClass('new_class');와 다를게 뭐가 있냐고 묻는다면 크게 차이가 없어도 한번의 명령을 사용한다는 점과 좀더 작업이 단순해진다는 정도입니다.

 

예를들면 <Div id='div1' class='class class2 class3'></div>라는 HTML 이 있다고하면 이 태그의 Class 값을 class4로 바꾸고자 한다면

 

$('#div1').removeClass().addClass('class4');로 한번 전체의 클래스를 지우고 다시 Class4를 추가합다.

 

$("#div1").attr('class', 'class4'); 로 한번의 작업으로 Class를 교체해 줍니다.

 

어떻게 사용하느냐는 본인의 선택입니다.

 

감사합니다.