jQuery에서는 class로 적용된 요소를 동적으로 처리할 수 있는 함수를 제공한다.
＃addClass(className)
- 해당 className을 가진 클래스 속성을 추가. 즉 이벤트가 발생한 노드에 선언된 클래스 스타일을 적용시킨다
.hidden {display:none;}
$("#box").addClass("hidden");
＃removeClass(className)
- removeClass는 addClass의 반대이다. 해당클래스 속성을 지정된 노드에서 제거해준다.
- 사용법은 addClass와 동일하다.
＃toggleClass(className)
- toggleClass는 addClass와 removeClass의 기능을 모두 포함하는 메소드이다.
toggle이란 용어의 의미대로 addClass와 removeClass 함수가 toggle 형식으로 교대로 적용된다.
즉, 스타일 클래스가 적용된 경우는 제거를, 속성이 선언되어 있지 않은 경우에는 선언해주게 된다.
.hidden {display:none;}
$("#box").toggleClass("hidden");위의 예제의 경우에 해당 노드에 특정 이벤트 액션을 걸어주는 경우 'hidden'이란 클래스 속성이 적용, 제거가 교대로 반복되게 된다.
728x90
