제이쿼리의 toggleClass() 메소드 매우 자주 사용됩니다. 이 메소드를 사용하면 원하는 요소에 새로운 클래스를 추가하거나 제거하기를 매우 쉽고 간단하게 반복할 수 있습니다.

toggleClass()는 설정된 클래스명을 해당하는 요소가 가지고 있는지 판단하여 해당 요소가 있으면 이를 제거합니다. 반대로 해당 요소가 없다면 이를 부여하는 매우 유용한 메소드입니다. 간단한 사용방법은 아래와 같습니다.

element.toggleClass('클래스명')

[ 1 ] toggleClass() 예제소스 코드 보기


<html>
<head>
<style type="text/css">
  .red { color: #f00; }
</style>
</head>

<body>
  <p id='test' class='red'>Class name red!</p>
  <button id='testbt'>Click</button>
</body>

<script type="text/javascript">
   $('#testbt').click(function() {
      $('#test').toggleClass('red');
   })
</script>
</html>


위 예제를 보시는 일반적으로 많이 사용되는 예제의 모습입니다.  toggleClass()는 클릭 이벤트와 많이 사용되는데 동일한 클릭이 반복실행될 경우 스위치 효과인 토글 이벤트 효과를 나타내기 위해 사용할 수 있습니다

위 예제의 .p태그는 class명 red를 가지고 있습니다. 그리고 스크립트를 실행하게 되면 red 클래스명은 이미 있기 때문에 가지고 있던 red 클래스명은 삭제됩니다. 만약 위 함수를 다시 실행하면 red 클래스명이 없기 때문에 다시 나타나게 됩니다. 실행 결과는 아래와 같습니다.



Class name red!



위 버튼을 직접 클릭해보세요.

# toggleClass()는 언제 사용해야 하는가?

사실 자바스크립트에서 특정 요소에 스타일을 직접 추가하거나 제거할 수 있습니다. 예를들어...

<script>
   $('testEle').css('color', 'red');
   // 스크립트를 사용한 변경 예제
</script>

하지만 스타일과 스크립트를 명확히 구분하여 코드를 작성하는 것이 좋기 때문에 가급적
toggleClass()를 사용해 스타일은 CSS에서 변경할 수 있도록 분리 후 사용하는 것이 좋은 방법입니다. 게다가 스크립트에 스타일을 사용할 경우 코드가 길어져 가독성 역시 좋지 않습니다.