English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

JavaScript 객체

JavaScript 참조 매뉴얼

JS DOM 참조 매뉴얼

HTML DOM classList 속성

HTML DOM Element 객체

classList읽기 전용 속성은 실시간 DOMTokenList 컬렉션을 반환합니다.

classList 속성은 요소에 CSS 클래스를 추가하고 제거하고 전환하는 데 매우 유용합니다。

이 속성은 읽기 전용입니다. 하지만 add()와 remove() 메서드를 사용하여 변경할 수 있습니다。

classList을 사용하는 것은,className요소의 클래스 목록에 접근하기 위해 공백으로 구분된 문자열을 사용합니다。

문법:

element.classList
var elem = document.getElementById("x");
elem.classList.add("para");
테스트를 보세요‹/›

브라우저 호환성

표中的数字指定了完全支持classList属性的第一个浏览器版本：

속성
classList83.6는5.110

속성

속성설명
length리스트에서 클래스 수를 반환합니다

메서드

메서드설명
add(class1, class2, ...)하나나 여러 개의 클래스 이름을 요소에 추가합니다。
요소의 class 속성에 이미 지정된 클래스가 존재하면 그 클래스를 추가하지 않습니다。
contains(class)}}요소의 class 속성에 지정된 클래스 값이 존재하는지 확인합니다。
가능한 값:

  • true-요소가 지정된 클래스 이름을 포함합니다

  • false-요소가 지정된 클래스 이름을 포함하지 않습니다

item(index)}}집합의 인덱스를 통해 클래스 값을 반환합니다. 인덱스는 0에서 시작합니다。
인덱스가 범위를 벗어났을 경우null。
remove(class1, class2, ...)요소에서 하나나 여러 개의 클래스 이름을 제거합니다。
주의:不存在의 클래스를 제거할 경우 오류가 발생하지 않습니다。
replace(oldClass, newClass)}}기존 클래스를 새 클래스로 대체하십시오.
toggle(class, true|false)요소의 클래스 이름 사이에서 전환합니다.
한 번째 매개 변수만 존재할 때: 클래스 값을 전환하십시오; 그렇지 않으면 0을 반환합니다. 즉, 해당 클래스가 존재하면 그를 제거하고 false를 반환하며, 존재하지 않으면 추가하고 true를 반환합니다.
두 번째 선택 사항이 존재할 때: 두 번째 매개 변수의 값이 true 일 경우 지정된 클래스 값을 추가하십시오; 두 번째 매개 변수의 값이 false 일 경우 그를 제거하십시오.
예제:
　 　 　 　 　 하나의 클래스를 제거하십시오:element .classList.toggle（"classToRemove", false）;
　 하나의 클래스를 추가하십시오:element .classList.toggle（"classToAdd", true）;

기술 세부 사항

반환 값:DOMTokenList, 요소의 클래스 이름을 포함한 목록
DOM 버전:DOM 등급1

更多实例

<p> 요소에 여러 개의 클래스를 추가하십시오:

var elem = document.getElementById("x");
elem.classList.add("para", "shadow");
테스트를 보세요‹/›

<p> 요소에서 하나의 클래스를 제거하십시오:

var elem = document.getElementById("x");
elem.classList.remove("para");
테스트를 보세요‹/›

<p> 요소에서 여러 개의 클래스를 제거하십시오:

var elem = document.getElementById("x");
elem.classList.remove("para", "shadow");
테스트를 보세요‹/›

<p> 요소의 두 개의 클래스 사이에서 전환하십시오:

var elem = document.getElementById("x");
elem.classList.toggle("anotherClass");
테스트를 보세요‹/›

<p> 요소가 가지고 있는 클래스 이름을 반환하십시오:

var len = document.getElementById("x").classList.length;
테스트를 보세요‹/›

<p> 요소의 클래스 이름을 반환하십시오:

var name = document.getElementById("x").classList;
테스트를 보세요‹/›

<p> 요소의 첫 번째 클래스 이름(인덱스 0)을 반환하십시오:

var name = document.getElementById("x").classList[0];
테스트를 보세요‹/›

item() 메서드를 사용하여 <p> 요소의 첫 번째 클래스 이름(인덱스 0)을 반환하십시오:

var name = document.getElementById("x").classList.item(0);
테스트를 보세요‹/›

요소가 "shadow" 클래스를 가지고 있는지 찾아내기:

var list = document.getElementById("x").classList;
if (list.contains("shadow")) {}}
alert("Yes!!! The P element contains ' shadow' class");
} else {
alert("No　' shadow' class found");　　　
}
테스트를 보세요‹/›

클래스(“open”)을 전환하여 옆면 네비게이션 버튼을 생성하려면:

관련 참조

CSS 강의:CSS 선택자

CSS 참조:CSS#id선택자

CSS 참조: CSS .class 선택자

HTML DOM 참조:HTML DOM className 속성

HTML DOM 참조:HTML DOM getElementsByClassName() 메서드

HTML DOM 참조:HTML DOM getElementById() 메서드

HTML DOM 참조:HTML DOM querySelector() 메서드

HTML DOM Element 객체

JavaScript History 객체HTML DOM Element 객체