[HTML5] classList api 클래스 변경 api

퍼블리셔 html

다프린

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

· 13년 전 · 조회 1900 1900 · 댓글 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에서 해주시기 바랍니다.

글쓰기

번호	제목	글쓴이	날짜	조회
5527	파일 처리 함수(3) #개발자 #php	돌아온깡통 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	726
5526	파일 처리 함수(2) #개발자 #php	돌아온깡통 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	646
5525	날짜 및 시간 함수 #개발자 #php	돌아온깡통 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	987
5524	파일 처리 함수(1) #개발자 #php	돌아온깡통 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	836
5523	문자열 함수(5) #개발자 #php	돌아온깡통 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	639
5522	문자열 함수(4) #개발자 #php	돌아온깡통 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	793
5521	문자열 함수(3) #개발자 #php	돌아온깡통 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	804
5520	문자열 함수(2) #개발자 #php	돌아온깡통 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	833
5519	문자열 함수(1) #개발자 #php	돌아온깡통 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	922
5518	사용자 정의 함수(3) #개발자 #php	돌아온깡통 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	571
5517	사용자 정의 함수(2) #개발자 #php	돌아온깡통 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	625
5516	사용자 정의 함수(1) #개발자 #php	돌아온깡통 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	798
5515	그 밖의 제어문 #개발자 #php	돌아온깡통 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	643
5514	반복 제어문(2) #개발자 #php	돌아온깡통 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	668
5513	반복 제어문(1) #개발자 #php	돌아온깡통 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	650
5512	조건 제어문(2) #개발자 #php	돌아온깡통 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	573
5511	조건 제어문(1) #개발자 #php	돌아온깡통 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	644
5510	비교 연산자, 논리 연산자 #개발자 #php	돌아온깡통 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	1253
5509	산술 연산자, 대입 연산자 #개발자 #php	돌아온깡통 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	586
5508	폼(Form)을 통한 변수의 전달 #개발자 #php	돌아온깡통 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	906
5507	가변 변수 #개발자 #php	돌아온깡통 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	793
5506	정적 변수 #개발자 #php	돌아온깡통 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	549
5505	전역 변수 #개발자 #php	돌아온깡통 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	567
5504	배열 변수 #개발자 #php	돌아온깡통 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	657
5503	변수 사용법 #개발자 #php	돌아온깡통 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	659