예
추가 "mystyle" A와 클래스를 <div> 요소 :
document.getElementById("myDIV").classList.add("mystyle"); »그것을 자신을 시도 더 "Try it Yourself" 아래의 예.
정의 및 사용
classList 속성은 클래스 반환 name(s) DOMTokenList 개체로, 요소의를.
이 속성은 요소에 CSS 클래스를 추가, 제거 및 전환하는 데 유용합니다.
classList 속성은 읽기 전용입니다, 그러나, 당신은 사용하여 수정할 수 있습니다 add() 및 remove() 방법.
크로스 브라우저 솔루션 : classList 속성은 IE9에서 지원 및 이전되지 않습니다. 그러나 사용할 수있는 클래스 이름의 (참조 크로스 브라우저 솔루션 속성 또는 정규 표현식을 "More Examples" 이 페이지의 하단을).
브라우저 지원
테이블의 숫자는 완전히 속성을 지원하는 최초의 브라우저 버전을 지정합니다.
| 재산 | |||||
|---|---|---|---|---|---|
| classList | 8.0 | 10.0 | 3.6 | 5.1 | 11.5 |
통사론
element .classList등록
| 재산 | 기술 |
|---|---|
| length | 의 수를 반환 목록에서 클래스를. 이 속성은 읽기 전용입니다 |
행동 양식
| 방법 | 기술 |
|---|---|
| add( class1, class2, ... ) | 요소에 하나 이상의 클래스 이름을 추가합니다. 지정된 클래스가 이미 존재하는 경우, 클래스가 추가되지 않습니다 |
| contains( class ) | 요소가 지정된 클래스 이름이 있는지 여부를 나타내는 부울 값을 반환합니다. 가능한 값 :
|
| item( index ) | 요소에서 지정된 인덱스 번호로 클래스 명을 돌려줍니다. 지수는 0에서 시작한다. 인덱스가 범위 외의 경우는 null를 돌려줍니다 |
| remove( class1, class2, ... ) | 요소에서 하나 이상의 클래스 이름을 삭제합니다. 참고 : 존재하지 않는 클래스를 제거하면, 오류가 발생하지 않습니다 |
| toggle( class, true|false) | 요소의 클래스 이름 사이를 전환합니다. 첫 번째 매개 변수는 요소에서 지정된 클래스를 제거하고 false를 반환합니다. 클래스가 존재하지 않는 경우, 요소에 추가하고, 반환 값은 true입니다. 선택적인 두번째 파라미터는, 클래스에 상관없이 이미 존재 여부에 추가되거나 제거 될 강제 부울 값이다. 예를 들면 : 요소 .classList : 클래스를 제거합니다. toggle("classToRemove", false) ; 요소 .classList : 클래스를 추가합니다. toggle("classToAdd", true) ; 참고 : 두 번째 매개 변수는 Internet Explorer에서 지원되는 오페라 12 및 이전되지 않습니다. |
기술적 세부 사항
| 반환 값 : | 클래스들의 목록을 포함하는 DOMTokenList, name(s) 의 요소를의 |
|---|
더 예
예
A를 여러 클래스를 추가 <div> 요소 :
document.getElementById("myDIV").classList.add("mystyle",
"anotherClass", "thirdClass"); »그것을 자신을 시도 예
A로부터 여러 클래스를 제거 <div> 요소 :
document.getElementById("myDIV").classList.remove("mystyle",
"anotherClass", "thirdClass"); »그것을 자신을 시도 예
A에 대한 두 클래스 간의 전환 <div> 요소 :
document.getElementById("myDIV").classList.toggle("newClassName"); »그것을 자신을 시도 예
클래스 가져 오기 name(s) (A)의 <div> 요소를 :
<div id="myDIV" class="mystyle
anotherClass thirdClass">I am a DIV element</div>
var x = document.getElementById("myDIV").classList;X의 결과는 다음과 같습니다
mystyle
anotherClass thirdClass »그것을 자신을 시도 예
얼마나 많은 클래스 이름 알아보십시오 <div> 요소가있다 :
var x = document.getElementById("myDIV").classList.length;X의 결과는 다음과 같습니다
3 »그것을 자신을 시도 예
첫 번째 클래스 이름 가져 오기 (index 0) (A)의 <div> 요소를 :
var x = document.getElementById("myDIV").classList.item(0);X의 결과는 다음과 같습니다
mystyle »그것을 자신을 시도 예
요소가 있는지 알아보십시오 "mystyle" 클래스를 :
var x = document.getElementById("myDIV").classList.contains("mystyle");X의 결과는 다음과 같습니다
true »그것을 자신을 시도 예
요소가 있는지 알아보십시오 "mystyle" 클래스를. 그렇다면, 다른 클래스 이름을 제거 :
var x = document.getElementById("myDIV");
if
(x.classList.contains("mystyle")) {
x.classList.remove("anotherClass");
} else {
alert("Could not find it.");
} »그것을 자신을 시도 예
드롭 다운 단추를 만들 클래스 사이의 전환 :
// Get the button, and when the user clicks on it, execute myFunction
document.getElementById("myBtn").onclick = function() {myFunction()};
/* myFunction toggles between adding and removing the show class, which
is used to hide and show the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick =
function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show'))
{
openDropdown.classList.remove('show');
}
}
}
}
»그것을 자신을 시도 대체 예 : 추가
크로스 브라우저 솔루션은 classList를 사용하는 경우. add() IE9 및 이전을위한 방법을 :
var x = document.getElementById("myDIV");
if (x.classList) {
x.classList.add("mystyle");
} else {
x.className
= "mystyle"; // For IE9 and earlier
} »그것을 자신을 시도 대체 예 : 제거
크로스 브라우저 솔루션은 classList를 사용하는 경우. remove() IE9 및 이전 버전에 대한 방법 :
var x = document.getElementById("myDIV");
if (x.classList) {
x.classList.remove("mystyle");
} else {
x.className = x.className.replace(/\bmystyle/g, ""); // For IE9
and earlier
} »그것을 자신을 시도 대체 예 : 포함
크로스 브라우저 솔루션은 classList를 사용하는 경우. contains() IE9 및 이전을위한 방법을 :
var x = document.getElementById("myDIV");
if (x.classList)
{
alert(x.classList.contains("mystyle"));
} else {
alert(/\bmystyle/g.test(x.className)); // For IE9 and earlier
} »그것을 자신을 시도 대체 예 : 전환
크로스 브라우저 솔루션은 classList를 사용하는 경우. toggle() IE9위한 방법에있어서,
var x = document.getElementById("myDIV");
if (x.classList) {
x.classList.toggle("mystyle");
} else {
// For IE9
var classes = x.className.split(" ");
var i =
classes.indexOf("mystyle");
if (i >= 0)
classes.splice(i, 1);
else
classes.push("mystyle");
x.className = classes.join(" ");
} »그것을 자신을 시도 관련 페이지
CSS 자습서 : CSS 선택기
CSS 참조 : CSS의 .class 선택기
HTML DOM 참조 : HTML DOM className Property
HTML DOM 참조 : HTML DOM getElementsByClassName() 메소드
HTML DOM 참조 : HTML DOM 스타일 개체
<요소 개체