更多"Try it Yourself"下面的例子。
定義和用法
班級列表屬性返回類name(s)的元件的，作為一個DOMTokenList對象。
此屬性是非常有用的添加，刪除和切換CSS類的元素。
班級列表屬性是只讀的，但是，你可以使用修改add()和remove()方法。
跨瀏覽器的解決方案：在IE9不支持和更早班級列表屬性。 但是，您可以使用的className屬性或正則表達式為跨瀏覽器解決方案（見"More Examples"在這個頁面的底部）。
瀏覽器支持
在表中的數字規定，完全支持該財產瀏覽器版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| classList | 8 | 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。 如果該類不存在，它被添加到元素，並且返回值是真實的。 可選的第二個參數是強制添加或移除類，不管它是否已經存在一個布爾值。 例如： 刪除類： 元素 .classList。 toggle("classToRemove", false) ; 添加類： 元素 .classList。 toggle("classToAdd", true) ; 注：在Internet Explorer中不支持第二個參數或Opera 12和更早版本。 |
技術細節
| 返回值： | 甲DOMTokenList，包含類的列表name(s)的元素的 |
|---|
更多示例
例
多個類添加到<div>元素：
document.getElementById("myDIV").classList.add("mystyle",
"anotherClass", "thirdClass"); 試一試» 例
從移除多個類<div>元素：
document.getElementById("myDIV").classList.remove("mystyle",
"anotherClass", "thirdClass"); 試一試» 例
獲得類name(s)上<div>元素：
<div id="myDIV" class="mystyle
anotherClass thirdClass">I am a DIV element</div>
var x = document.getElementById("myDIV").classList;x的結果將是：
mystyle
anotherClass thirdClass 試一試» 例
得到第一個類名稱(index 0)上<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');
}
}
}
}
試一試» 後備例：增加
使用班級列表當A跨瀏覽器的解決方案。 add()為IE9和早期方法，：
var x = document.getElementById("myDIV");
if (x.classList) {
x.classList.add("mystyle");
} else {
x.className
= "mystyle"; // For IE9 and earlier
} 試一試» 回退示例：除去
使用班級列表當A跨瀏覽器的解決方案。 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
} 試一試» 後備例如：含有
使用班級列表當A跨瀏覽器的解決方案。 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
} 試一試» 回退實施例：切換
使用班級列表當A跨瀏覽器的解決方案。 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 Style對象
<元素對象