[HTML5] classList api 클래스 변경 api

다프린

프로필 보기 이 회원 글보기

· 13년 전 · 조회 1870 1870 · 댓글 1 1

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년 전

감사합니다. 잘보고 갑니다.

게시글 목록

번호	제목	글쓴이	조회	날짜
32071	센스리더 센스리더의 기능과 기능키 - 13. 위치기억 관련 기능	지운아빠	2,818	12년 전
32070	센스리더 센스리더의 기능과 기능키 - 12. 하일라이트 관련 기능	지운아빠	2,848	12년 전
18535	JavaScript ajax 그리드 문의 1	보충수업	1,474	12년 전
5369	JQuery를 이용해서 rss를 원하는부분 출력하고싶은데요 3	컬티스	888	12년 전
27088	사이트 추천즘 부탁드려요~ 3	kiplayer	799	12년 전
5364	php 에서 USB 외장 드라이버에 인식은 어떻게.... 4	항상감사	585	12년 전
32069	센스리더 센스리더의 기능과 기능키 - 11. 그래픽 관련 기능	지운아빠	2,808	12년 전
32068	센스리더 센스리더의 기능과 기능키 - 10. 설정 기능	지운아빠	2,946	12년 전
18521	jQuery jquery 속도 높이는 팁 13	울랄라커뮤니케이션스	2,099	12년 전
5359	php 글자 깨짐 질문입니다. 4	Holyreign	1,331	12년 전
18520	jQuery Easing Functions Cheat Sheet	편리	781	12년 전
32067	센스리더 센스리더의 기능과 기능키 - 9. 환경 기능	지운아빠	2,860	12년 전
32066	센스리더 센스리더의 기능과 기능키 - 8. 음성 관련 기능	지운아빠	3,189	12년 전
27081	웹호환성과 접근성?? 6	조박사님	1,234	12년 전
18514	jQuery Mobilize 의 touchSlider 아시나용? (모바일용으로 유명한 터치슬라이더~) 5	kiplayer	10,565	12년 전
5355	올레 500 Error Page 3	itlang	1,415	12년 전
5354	아.. 힘드네요.	342s	423	12년 전
5350	php session_id 질문 3	senseme	1,360	12년 전
32065	센스리더 센스리더의 기능과 기능키 - 7. 토글기능	지운아빠	3,105	12년 전
18510	Mobile [안드로이드] TextView 텍스트 많아지면 ...으로 표시방법. 3	수저	7,121	12년 전
18503	jQuery 좌우 슬라이드메뉴와 상하 슬라이드 메뉴 6	port	8,959	12년 전
32064	센스리더 센스리더의 기능과 기능키 - 6. 사용자 윈도우 기능	지운아빠	2,861	12년 전
32063	센스리더 센스리더의 기능과 기능키 - 5. 활성 윈도우 정보 기능	지운아빠	2,987	12년 전
18502	기타 [안드로이드] No Launcher activity found! 에러 해결방법	수저	6,668	12년 전
18499	기타 [안드로이드] java.lang.NullPointerException 에러 해결 방법 2	수저	10,512	12년 전
18495	MySQL MySQL 5.1 VS MySQL 5.5 버전 각각 MyISAM 엔진과 InnoDB 엔진 속도 비교 3	박사마	4,045	12년 전
5345	그누보드 플러그인 프레임워크.. 개발자분들 함께해요 (2) 4	byfun	574	12년 전
27079	텝메뉴 문의 드립니다. 1	아이바위	876	12년 전
30718	CSS id나 class 명은 어떻게 쓰시는지요? 9	레어닉	2,351	12년 전
18494	PHP 그누보드 자동 이스케이프 관련 버그(?)	레어닉	683	12년 전
18493	jQuery jQuery / jQuery Mobile 에서 json 파싱 방법	kiplayer	3,732	12년 전
5343	안하다 하려니 어렵네요. 1	대근	426	12년 전
18491	MySQL Mysql DB를 InnoDB로 바꿔봅시다 1	울랄라커뮤니케이션스	2,937	12년 전
18489	웹서버 리눅스 서버 관리에 필요한 50가지 팁 1	울랄라커뮤니케이션스	3,433	12년 전
18487	Mobile 모바일 웹 개발에 큰 도움이 되는 피모 브라우저 1	주재넷	2,091	12년 전
18486	PHP 간단한 쿠폰번호 생성	kiplayer	2,167	12년 전
18484	PHP xml 파싱 예제 1	울랄라커뮤니케이션스	3,261	12년 전
18482	PHP eval 1	windowhan	672	12년 전
32062	센스리더 센스리더의 기능과 기능키 - 4. 캐럿 읽기 기능	지운아빠	2,896	12년 전
26476	제안서 제안서 유용한 도형 13	미르얌	5,223	12년 전
18481	jQuery 롤오버+슬라이드 질문드립니다.	그루컴즈	1,633	12년 전
5339	mysql connect 해제 관련 3	AMDbest	1,341	12년 전
18480	jQuery jQuery path plugin	편리	1,206	12년 전
18476	JavaScript 아이폰일때 상단 검색바 숨기기 3	kiplayer	1,125	12년 전
27137	도와주소서 ㅠㅠ 6	한번잘해보자	923	12년 전
30711	반응형 참고해서 만들어 본 반응형 레이아웃 6	kiplayer	3,129	12년 전
18475	PHP 어떤 스마트폰에서 접속했는지 알아내는 함수	dsv421	796	12년 전
18474	PHP 년별 월별 일별 시간 범위 구하기	dsv421	1,504	12년 전
18470	jQuery jQuery로 파일업로드(input=file) 버튼 이미지로 변경하기 3	dsv421	5,833	12년 전
32061	센스리더 센스리더의 기능과 기능키 - 3. 마우스 동작 기능	지운아빠	3,207	12년 전
18469	웹서버 AWS 아마존 클라우드 서버 Network Latency Check	MFBob	2,610	12년 전
32060	센스리더 센스리더의 기능과 기능키 - 2. 포인터 이동 기능	지운아빠	3,094	12년 전
5335	php 최근 버전은 addslashes 굳이 안써도 되나요 3	AMDbest	1,460	12년 전
32059	센스리더 센스리더의 기능과 기능키 - 1. 포인터 읽기 기능	지운아빠	785	12년 전
5333	모든 게시판에서 게시글(최신글) 및 첨부파일 가져오는 쿼리문 1	모니터군	1,199	12년 전
32058	센스리더 센스리더의 메뉴 구성 - 7. 도움말	지운아빠	1,261	12년 전
32057	센스리더 센스리더의 메뉴 구성 - 6. 보기	지운아빠	607	12년 전
30705	CSS 팁은 아닌데 그냥 제가 자주쓰는 버튼 css 5	kiplayer	3,537	12년 전
5326	하이브리드 앱 방법론에 대한 생각(jQM,Sencha,Html5) 6	kiplayer	3,959	12년 전
18466	PHP 서버의 php버전이 낮아서 json_encode() 함수가 안될때 사용하는 함수 2	kiplayer	2,290	12년 전
18462	JavaScript 모바일웹 이미지맵 사용 소스 3	kiplayer	8,284	12년 전
18461	JavaScript [복사하기] 버튼 자료~	kiplayer	940	12년 전
31504	표준화 7강 갤러리 게시판 스킨 (skin/board) 21	지운아빠	8,733	12년 전
30696	웹접근성 html / css 버튼 만들어 주는 사이트. 자주 활용합니다^^; 편리성 8	돼지코구뇽	16,898	12년 전
32056	센스리더 센스리더의 메뉴 구성 - 5. 점자	지운아빠	1,221	12년 전
5321	나만그런가? 도무지 기억이 안나는 현상! 4	유보	699	12년 전
18456	PHP php 동영상 강좌 4	서기	6,238	12년 전
18455	jQuery array toggle	개판	692	12년 전
32055	센스리더 센스리더의 메뉴 구성 - 4. 도구	지운아빠	876	12년 전
5315	에딧플러스 bak 파일 5	요태지	633	12년 전
5310	MySQL 필드순서 바꾸는 명령 있을까요? 4	지러유	778	12년 전
27072	웹표준 궁금한것이 있습니다. 6	AKASIA	1,122	12년 전
32054	센스리더 센스리더의 메뉴 구성 - 3. 환경 설정	지운아빠	975	12년 전
27066	에디터플러스에서 zencoding 질문있는데요. 5	웹디자인되고파	1,081	12년 전
18453	OS Linux 네트워크 트래픽 확인 iftop 1	daro	3,650	12년 전
30692	HTML IE6 PNG 초 간단하게 적용 3	daro	2,129	12년 전
30690	HTML HTML5 placeholder 사용하기 1	daro	4,380	12년 전
18451	OS iptables UDP IP 차단 1	daro	3,068	12년 전
18450	웹서버 nginx 413 Request Entity Too Large 파일 업로드시 해당 오류뜰경우	daro	4,255	12년 전
18449	PHP php array_map() 함수를 대체하기 위해 만든 함수	편리	2,066	12년 전
5307	함수 안에 include 사용시 궁금한점이 있습니다 2	진서기	1,269	12년 전
32051	센스리더 센스리더의 메뉴 구성 - 2. 음성 설정 2	지운아빠	920	12년 전
18448	OS PHP Mcrypt on CentOS 6	관리자	2,066	12년 전
18447	OS 리눅스 CENT OS 비트(bit) 확인하기	관리자	4,997	12년 전
18441	jQuery 참고사이트 모음 5	dsv421	1,269	12년 전
18437	jQuery ajax로 폼값 쉽게 넘기기 serialize() 3	dsv421	4,112	12년 전
18429	jQuery 기초적이지만 자주 쓰이는 Jquery 팁 20가지 7	dsv421	5,635	12년 전
32049	센스리더 센스리더의 메뉴 구성 - 1. 파일 1	지운아빠	1,269	12년 전
30686	CSS 제가 사용하는 CSS RESET (초기화) 3	지운아빠	2,531	12년 전
5299	프리랜서 여러분 , 여러분들은 어디서 일거리를 구하십니까? 7	프로프리랜서	1,638	12년 전
5289	여러분들은 현재 어떤 DOCYTPE 을 사용하시는지요??? 9	atria	605	12년 전
30677	HTML <img> 태그 올 바르게 사용하기. 8	daro	2,319	12년 전
32042	센스리더 센스리더에서 사용되는 개념들 6	지운아빠	2,067	12년 전
18426	PHP 간단하게 파일을 쓰거나 읽는 함수입니다. 2	프로프리랜서	759	12년 전
18422	PHP 간단하게 파일을 쓰거나 읽는 함수입니다. 3	프로프리랜서	708	12년 전
18420	OS 아파치 로그를 분석하여 특정 아이피가 몇번 접속 했는지 알아내는 스크립트 1	프로프리랜서	3,199	12년 전
18418	OS 파일 목록의 합계 구하기 1	프로프리랜서	1,617	12년 전
5285	게시판 뷰페이지 구현시 질문입니다. 3	AMDbest	636	12년 전
5282	구문의 오류 아닌 오류에 대한 질문입니다. 2	AMDbest	493	12년 전
26459	계약서 홈페이지 제작계약서 v9.7.3 16	해피정	8,133	12년 전

이전 다음

21 22 23 24 25

전체 목록