[JS] 클래스 제어하기 - classList 그리고 IE

클래스 다루기. 자바스크립트와 제이쿼리에서는 어떻게 클래스를 다루는지, classList를 지원하지 않는 익스플로러에서 대체할 메서드는 무엇인지 알아보기

 

 

 

바닐라(모던자바스크립트) JS의 classList로 제어하기

---

 

var element = document.getElementById( 'element' );

element.classList.add( 'someclass' );
element.classList.add( 'someclass1', 'someclass2' );

element.classList.remove( 'someclass' );
element.classList.remove( 'someclass1', 'someclass2' );

element.classList.contains( 'someclass' );
element.classList.contains( 'someclass1', 'someclass2' );

element.classList.toggle( 'someclass' );
element.classList.toggle( 'someclass', true ); // 강제로 class 추가
element.classList.toggle( 'someclass', false ); // 강제로 class 삭제

 

 

 

 

jquery로 class 제어하기

---

$( '#element' ).addClass( 'someclass' );
$( '#element' ).addClass( 'someclass1 someclass2' );

$( '#element' ).removeClass( 'someclass' );
$( '#element' ).removeClass( 'someclass1 someclass2' );

$( '#element' ).hasClass( 'someclass' );
$( '#element' ).hasClass( 'someclass1 someclass2' );

$( '#element' ).toggleClass( 'someclass' );

 

 

 

 

lassList를 지원하지 않는 익스플로러

---

classList는 익스플로러에서 일부만 지원한다고 나와있다. IE9 이하에서는 classList 속성이 지원되지 않고 10 이상이 지원된다. 아래 두 가지 호환용 스크립트를 페이지에 포함시키고 IE를 작동하면 9 이하 버전도 사용할 수 있다.

 

polyfill

• devongovett : https://gist.github.com/devongovett/1381839
• eligrey : https://github.com/eligrey/classList.js

 

 

 

---

 

참고

https://tonks.tistory.com/161

https://www.it-swarm.dev/ko/javascript/ie%EC%97%90%EC%84%9C-classlist%EA%B0%80%EC%9E%88%EB%8A%94-%EC%BD%94%EB%93%9C%EA%B0%80-%EC%9E%91%EB%8F%99%ED%95%98%EC%A7%80-%EC%95%8A%EC%8A%B5%EB%8B%88%EA%B9%8C/941292294/

http://blim.co.kr/archives/160