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 지원이 안되서 쓰기 힘들고
모바일에는 오페라 빼고는 거의 다 지원되니 모바일에 요긴합니다.
댓글 1개
dsv421
12년 전
감사합니다. 잘보고 갑니다.
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 5530 | 13년 전 | 555 | ||
| 5529 | 13년 전 | 741 | ||
| 5528 | 13년 전 | 730 | ||
| 5527 | 13년 전 | 1041 | ||
| 5526 | 13년 전 | 1056 | ||
| 5525 | 13년 전 | 1820 | ||
| 5524 | 13년 전 | 694 | ||
| 5523 |
high8sky
|
13년 전 | 749 | |
| 5522 | 13년 전 | 3138 | ||
| 5521 | 13년 전 | 869 | ||
| 5520 |
즐거운상상을
|
13년 전 | 1127 | |
| 5519 | 13년 전 | 1503 | ||
| 5518 | 13년 전 | 966 | ||
| 5517 | 13년 전 | 1986 | ||
| 5516 | 13년 전 | 684 | ||
| 5515 |
순천홈페이지
|
13년 전 | 2843 | |
| 5514 | 13년 전 | 1177 | ||
| 5513 |
수야3019
|
13년 전 | 1505 | |
| 5512 | 13년 전 | 905 | ||
| 5511 | 13년 전 | 1061 | ||
| 5510 |
 직화오리팡야 |
13년 전 | 1419 | |
| 5509 |
 TopSchooL |
13년 전 | 1110 | |
| 5508 | 13년 전 | 1673 | ||
| 5507 | 13년 전 | 1546 | ||
| 5506 | 13년 전 | 714 | ||
| 5505 | 13년 전 | 2792 | ||
| 5504 |
물끄덩미끄덩
|
13년 전 | 956 | |
| 5503 |
후라보노보노
|
13년 전 | 1979 | |
| 5502 | 13년 전 | 873 | ||
| 5501 | 13년 전 | 1952 | ||
| 5500 | 13년 전 | 1820 | ||
| 5499 | 13년 전 | 1817 | ||
| 5498 | 13년 전 | 773 | ||
| 5497 |
레인보우1492
|
13년 전 | 1339 | |
| 5496 | 13년 전 | 1073 | ||
| 5495 |
jdjjun00
|
13년 전 | 2049 | |
| 5494 | 13년 전 | 910 | ||
| 5493 | 13년 전 | 989 | ||
| 5492 | 13년 전 | 1239 | ||
| 5491 | 13년 전 | 1094 | ||
| 5490 | 13년 전 | 886 | ||
| 5489 |
빨간망사챠챠
|
13년 전 | 2284 | |
| 5488 |
나태한개미
|
13년 전 | 1068 | |
| 5487 |
나태한개미
|
13년 전 | 1030 | |
| 5486 |
나태한개미
|
13년 전 | 2119 | |
| 5485 | 13년 전 | 1803 | ||
| 5484 | 13년 전 | 6533 | ||
| 5483 | 13년 전 | 1431 | ||
| 5482 |
Raincommunication
|
13년 전 | 772 | |
| 5481 |
TopSchooL |
13년 전 | 578 | |
| 5480 |
 스마트파인드 |
13년 전 | 997 | |
| 5479 | 13년 전 | 1036 | ||
| 5478 |
직화오리팡야 |
13년 전 | 888 | |
| 5477 | 13년 전 | 671 | ||
| 5476 | 13년 전 | 1120 | ||
| 5475 | 13년 전 | 1436 | ||
| 5474 | 13년 전 | 828 | ||
| 5473 | 13년 전 | 652 | ||
| 5472 | 13년 전 | 1143 | ||
| 5471 | 13년 전 | 1609 | ||
| 5470 | 13년 전 | 956 | ||
| 5469 |
BackToHeaven
|
13년 전 | 2220 | |
| 5468 |
멀티트리플
|
13년 전 | 1102 | |
| 5467 | 13년 전 | 728 | ||
| 5466 | 13년 전 | 1304 | ||
| 5465 | 13년 전 | 1410 | ||
| 5464 | 13년 전 | 1495 | ||
| 5463 | 13년 전 | 691 | ||
| 5462 | 13년 전 | 1416 | ||
| 5461 | 13년 전 | 1065 | ||
| 5460 | 13년 전 | 2561 | ||
| 5459 | 13년 전 | 1064 | ||
| 5458 |
프로프리랜서
|
13년 전 | 955 | |
| 5457 | 13년 전 | 808 | ||
| 5456 |
PHPㅡASP프로그래머
|
13년 전 | 1330 | |
| 5455 |
뭐먹고살지ㅠ
|
13년 전 | 866 | |
| 5454 | 13년 전 | 1614 | ||
| 5453 |
프리랜서클럽
|
13년 전 | 1195 | |
| 5452 | 13년 전 | 834 | ||
| 5451 | 13년 전 | 783 | ||
| 5450 | 13년 전 | 7290 | ||
| 5449 |
PHPㅡASP프로그래머
|
13년 전 | 832 | |
| 5448 |
DBDBDB
|
13년 전 | 669 | |
| 5447 | 13년 전 | 1943 | ||
| 5446 |
헬프데스크
|
13년 전 | 1802 | |
| 5445 | 13년 전 | 968 | ||
| 5444 |
Werbershinta
|
13년 전 | 677 | |
| 5443 | 13년 전 | 1345 | ||
| 5442 | 13년 전 | 1063 | ||
| 5441 | 13년 전 | 1175 | ||
| 5440 | 13년 전 | 3168 | ||
| 5439 | 13년 전 | 835 | ||
| 5438 |
ddokkani
|
13년 전 | 766 | |
| 5437 | 13년 전 | 2629 | ||
| 5436 | 13년 전 | 1018 | ||
| 5435 |
PHPㅡASP프로그래머
|
13년 전 | 838 | |
| 5434 |
돗단배123
|
13년 전 | 1611 | |
| 5433 | 13년 전 | 1770 | ||
| 5432 |
 엘남매아빠 |
13년 전 | 919 | |
| 5431 | 13년 전 | 769 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기