class 변경으로 엘리멘탈에 변환을 줘야 할때가 있습니다.
제이쿼리에 addClass 쓰면 편하겠지만.
거대한 프로그램을 만들때나 모바일 페이지 만들때 요긴하게 쓰입니다.
지원 브라우저:http://caniuse.com/classlist
(역시나 IE는 운지~)
document.getElementById("???").classList
개발자도구로 보면 뒤에 생소한게 있는게 보일 겁니다.
classList 배열로 이루어 져서
add, remove, toggle
이 3가지만 아시면 끝입니다. 대충 제이쿼리 하시는 분들 감이 오실 겁니다.
--추가
document.getElementById("test").classList.add("aa");
test 엔리멘탈에 클래스에 aa 넣기 (aa 이미 있으면 무시 됩니다.)
--삭제
document.getElementById("test").classList.remove("aa");
test 엔리멘탈에 클래스에 aa 삭제
--넣거나 빼거나
*중요*
document.getElementById("test").classList.toggle("aa");
aa가 있으면 삭제하고 aa 없으면 aa를 넣습니다.
응용 방법
(function(){
document.getElementById("test").onclick = function(){
document.getElementById("userList").classList.toggle("on");
};
})();
해석
test 엔리멘탈을 클릭하면 userList 엔리멘탈에 클래스를 넣거나 뺀다.
아직 IE 지원이 안되서 쓰기 힘들고
모바일에는 오페라 빼고는 거의 다 지원되니 모바일에 요긴합니다.
게시글 목록
| 번호 | 제목 |
|---|---|
| 10331 |
jQuery
제이쿼리 이미지 메뉴
8
|
| 19987 |
HTML
object 태그 질문 드ㅡ립니다
2
|
| 17582 |
견적서
엑셀.,견적서..,
13
|
| 10327 | |
| 10326 | |
| 17579 | |
| 17575 | |
| 10318 |
jQuery
유니클로 슬라이드 간략버전
7
|
| 10311 |
MySQL
mysql 성능향상을 위한 팁..
6
|
| 10300 |
MySQL
조건문을 정확하게 써라
10
|
| 19985 | |
| 10299 |
JavaScript
여러개의 라디오버튼 모든 버튼 필수 입력 제이쿼리형
|
| 10290 | |
| 19981 | |
| 10288 | |
| 10286 | |
| 10285 |
JavaScript
체크박스 다중선택시 제한 걸기 (3개이상 선택시 애러메시지 출력)
|
| 10273 | |
| 19977 |
CSS
가상클래스 순서 외우기
3
|
| 19968 | |
| 19963 |
반응형
반응형웹 패턴/리소스/뉴스
4
|
| 19959 | |
| 17801 | |
| 10264 |
JavaScript
자바스크립트 함수모음!!!
8
|
| 10261 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기