更多"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对象
<元素对象