javascript class 명 추가/삭제

웹 페이지 개발 중 특정 HTML 요소에 onClick 이벤트를 발생 시 이미지 변경 또는 특정 효과를 주기 위해 class 를 추가 제거 하는 상황들이 많이 발생하게 됩니다. 

물론 큰 사이트 개발이나 유지 보수를 하는 경우라면 개발자 입장에서는 위와 같은 경우를 컨트롤 할 필요가 거의 없습니다. UI / UX 개발 담당자들 또는 퍼블리셔들이 이미 해당 HTML 요소(Check box, Radio box 등등)의 click 이벤트에 대해 처리를 해두었기 때문입니다. 

하지만 소규모 프로젝트에서 일반적으로 퍼블을 전달 받았을때 스크립트 적용은 되어 있지 않은 경우가 거의 대부분입니다. 

그렇다면 HTML 요소의 class 변경을 어떻게 해야 할까요? 

<input id="chkBox" type="checkbox" class="on"
       onclick="javascript:chkBoxImageChange();" checked/>

위 코드는 간단한 체크 박스를 표기 합니다. 

기본 checked / unchecked 이미지를 사용 하지 않습니다.  

class 명이 on 일경우 check 된 스타일의 이미지를 입히고, 

class 명이 빈값일 경우 unchecked 된 스타일의 이미지를 입힌다고 가정 하겠습니다. 

chkBoxImageChange() 함수는 아래와 같이 작성하면 됩니다. 

<script type="text/javascript">

   window.chkBoxImageChange = function() {
       if(document.getElementById('chkBox').getAttribute('class') == 'on')
       {
           document.getElementById('chkBox').setAttribute('class', '');
       } else {
           document.getElementById('chkBox').setAttribute('class', 'on');
      };
   };

</script>

class 명이 on 이면 id 값이 chkBox 인 요소의 속성 값 중 class 를 빈값으로 바꾸고 

class 명이 빈값이면 id 값이 chkBox 인 요소의 속성 값 중 class 를 on 으로 바꾸는 코드 입니다. 

위와 같이 작성 할 수 있지만 HTML5 에서는 위와 같은 수고스러움을 모두 덜어 주고 있습니다. 

<script type="text/javascript">

   window.fncShowHideList = function() {
       document.getElementById('chkBox').classList.toggle('on');
   };

</script>

HTML5에서는 classList 라는 속성을 제공하고 있는데요. 이녀석은 class 값을 더욱 쉽게 가지고 놀수 있도록 도와 주고 있습니다. 

classList.toggle('class명') 이라고 작성 했을 경우 class명이 존재 하면 삭제를 하고 존재하지 않을 경우 추가를 하는 동작을 합니다. 

jQuery 의 toggle 과 동일한 동작을 하는 거죠. 다만 jQeury 는 사용하기 위해 Library 를 추가 해야 하지만 HTML5 는 그럴 필요가 없다는 겁니다. 

Element.classList 사용 예를 추가로 보여드리겠습니다. 

div.classList.remove("foo");
div.classList.add("newclass");

<div> 태그 class 명에 foo 값이 있으면 제거하고 newclass 라는 class 명을 추가 합니다. 

div.classList.toggle("visible");

첫 샘플에서는 getElementById('id') 로 해당 ID값에 대해 class 추가 / 삭제 여부를 결정 했다면 이번에는 <div> 태그 전체에서 class 명 중 visible 있으면 삭제하고 없으면 추가 하는 명령입니다. 

div.classList.toggle("visible", i < 10 );

for loop 이나 while loop 을 돌리고 있을 경우 i 값으로 카운트 한다고 가정했을때 i 값이 10보자 작을 경우에만 class 명이 visible 이 있으면 삭제하고 없으면 추가 하는 명령입니다. i 값이 10보다 커지면 아무 동작 하지 않습니다. 

alert(div.classList.contains("foo"));

contains 라는 함수가 보이는 데요. 이는 foo 라는 class 명이 있으면 true 를 리턴하고 없으면 false 를 리턴합니다. 

div.classList.add("foo", "bar");
div.classList.remove("foo", "bar");

class 명을 , 로 구분하여 한번에 여러 class 명을 추가 / 삭제 하는 명령입니다. 

IE 10 에서는 동작하지 않는 다는 글이 있습니다. (제가 테스트 해보지는 못했습니다. 테스트 후 확인 되면 명확하게 내용 추가 하도록 하겠습니다. )

그래서 PC 환경에서는 적용하기 약간은 부담이 될 수도 있지만 모바일 환경이라면 마음 놓고 사용하셔도 문제 없을 것 같습니다.