[HTML5] classList api 클래스 변경 api

다프린

프로필 보기 이 회원 글보기 이 회원의 댓글보기

· 13년 전 · 조회 4347 4347 · 댓글 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년 전

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

게시판 목록

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.

글쓰기

번호	분류	제목	글쓴이	날짜	조회
107	HTML	cart클래스1	홀로남은자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3334
106	HTML	비교 복사 [1]	관리자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3216
105	HTML	싸이월드 둥근 테두리 만드는 방법 [2]	그레이스웹 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4947
104	HTML	페인트 브러시 툴(Paintbrush Tool, 단축키 - B)	happycommunity 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	6287
103	HTML	올가미 툴(Lasso Tool, 단축키 - L)	happycommunity 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	5265
102	HTML	포토샵 레이어의 이해 [2]	happycommunity 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4622
101	HTML	점선 그리는 법... [2]	happycommunity 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3437
100	HTML	일러스트 단축키2	happycommunity 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	6187
99	HTML	스타일 시트로 마우스 오버와 아웃시 바뀌는 색깔	강강술냄세 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	5020
98	HTML	XP서비스팩2 무시하고 새창 띄우기	강강술냄세 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3444
97	HTML	개행문자 없애기[펌] [1]	드렁크수달스 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4438
96	HTML	우체국- 해외발송 구역 및 나라구분 (우편번호와 비슷)	한대호 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	6877
95	HTML	이미지(img)를 이용한 백그라운드 통신	한대호 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4332
94	HTML	[JavaScript] 익스플로러,네츠케이프 모두에서 iframe 과 비슷하게 해보자!	한대호 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3217
93	HTML	웹 폰트 적용 시키기 - 초보자용 -	한대호 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	5756
92	HTML	페이지 자동 이동 방법 3가지!!!	한대호 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4150
91	HTML	body옆의 스크롤바흔적없애기 [1]	happycommunity 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	5179
90	HTML	마우스 오른쪽 버튼 사용금지	happycommunity 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3237
89	HTML	마우스 룰오버시 여러가지 효과내기	happycommunity 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3161
88	HTML	포토샾 팁 72가지 [1]	happycommunity 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3626
87	HTML	업로드시 중복 파일명 체크및 새로운 이름 생성 [6]	유창화 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	5163
86	HTML	디렉토리 이미지 뷰어 [18]	유창화 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4810
85	HTML	GD와 GifSicle을 이용한 animationGIF 생성하기 [4]	관리자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4138
84	HTML	PHP 한글 메뉴얼[Professional HTML Preprocessor]	ⓦangcho 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3492
83	HTML	register_global=off 일때 파일 업로드 방법	빨간망토의비밀 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3151
82	HTML	디렉토리 용량 체크 (윈도우 리눅스 공용) [6]	유창화 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4917
81	HTML	password() 의 함수로 암호화한 스크립트를 복호화 할수 없습니다.!! [1]	damoa.biz 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4130
80	HTML	insertRow,insertCell,createElement,innerHTML [2]	관리자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4451
79	HTML	디렉토리별 용량체크 (Linux server) [3]	가을 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3583
78	HTML	[영문] Ajax 사이트 한곳 더 소개 합니다~! [1]	ⓦangcho 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4918