JavaScript Element classList 属性

classList属性返回元素的类名，作为DOMTokenList对象。此属性对于在元素上添加，删除和切换CSS类很有用。classList属性是只读的，但是，您可以使用add()和remove()方法对其进行修改。

跨浏览器解决方案： IE9及更早版本不支持classList属性。但是，您可以将className属性或正则表达式用于跨浏览器解决方案（请参阅本页底部的“更多示例”）。

实例：

将“mystyle”类添加到<div>元素：

document.getElementById("myDIV").classList.add("mystyle");

尝试一下

浏览器支持

项	IE/Edge	Chrome	FireFox	Safari	Opera
属性
classList	10.0	8.0+	3.6+	5.1+	11.5+

语法

element.classList

属性

属性	描述
length	返回列表中的类数。此属性是只读的

方法

方法	描述
add(class1, class2, ...)	向元素添加一个或多个类名。如果指定的类已存在，则不会添加该类
contains(class)	返回一个布尔值，指示元素是否具有指定的类名。可能的值： true - 元素包含指定的类名 false - 元素不包含指定的类名
item(index)	返回具有元素中指定索引号的类名。索引从0开始。如果索引超出范围，则返回null
remove(class1, class2, ...)	从元素中删除一个或多个类名。注意：删除不存在的类不会引发错误
toggle(class, true\|false)	在元素的类名之间切换。第一个参数从元素中删除指定的类，并返回false。如果该类不存在，则将其添加到元素中，并且返回值为true。可选的第二个参数是一个布尔值，它强制添加或删除类，无论它是否已存在。例如：删除一个类：element.classList.toggle（“classToRemove”，false）; 添加一个类：element.classList.toggle（“classToAdd”，true）; 注意：Internet Explorer或Opera 12及更早版本不支持第二个参数。

技术细节

项目	描述
返回值：	DOMTokenList，包含元素的类名列表
DOM版本	Core Level 1

更多例子

将多个类添加到<div>元素：

document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");

尝试一下

从<div>元素中删除一个类：

document.getElementById("myDIV").classList.remove("mystyle");

尝试一下

从<div>元素中删除多个类：

document.getElementById("myDIV").classList.remove("mystyle", "anotherClass", "thirdClass");

尝试一下

在<div>元素的两个类之间切换：

document.getElementById("myDIV").classList.toggle("newClassName");

尝试一下

获取<div>元素的类名：

<div id="myDIV" class="mystyle anotherClass thirdClass">I am a DIV element</div>

var x = document.getElementById("myDIV").classList;

尝试一下

找出<div>元素有多少个类名：

var x = document.getElementById("myDIV").classList.length;

尝试一下

获取<div>元素的第一个类名（索引0）：

var x = document.getElementById("myDIV").classList.item(0);

尝试一下

找出元素是否具有“mystyle”类：

var x = document.getElementById("myDIV").classList.contains("mystyle");

尝试一下

找出元素是否具有“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");
}

尝试一下

JavaScript Element classList 属性

JavaScript Element classList 属性

浏览器支持

语法

属性

方法

技术细节

更多例子

相关页面