HTML DOM classList 属性
htmlweb developmentfront end technology更新于 2024/6/2 0:44:17
HTML DOM classList 属性用于返回与 HTML 元素关联的类名。它以 DOMTokenlist 的形式返回类名。DOMTokenlist 只是一组以空格分隔的标记。此属性在添加、删除或切换元素的 CSS 类时非常有用。
classList 属性是只读属性，但您可以使用 add() 和 remove() 方法添加或删除元素的类。
属性
以下是 classList 的属性 −
| 属性 | 描述 |
|---|---|
| Length | 返回列表中的类数。它是只读的。 |
方法
以下是 classList 的方法 −
| 方法 | 描述 |
|---|---|
| add(class1, class2, class 3...) | 向元素添加一个或多个类名。如果指定的类已经存在，则不会添加。 |
| contains(class) | 返回布尔值，指示元素是否具有指定的类名。True 表示元素包含指定的类名，false 表示元素不包含该类名。 |
| item(index) | 从元素中返回具有给定索引号的类名。索引从 0 开始，如果索引超出范围，则返回 null。 |
| remove(class1, class2 class 3, ...) | 从元素中删除一个或多个类名。如果 remove 中指定的类不存在，则不会抛出错误。 |
| toggle(class, true|false) | 在元素的类名之间切换。第一个参数为元素添加一个类，如果不存在则返回 true;如果类存在，则直接从元素中删除它，并返回 false。第二个参数是可选参数，它采用布尔值并强制添加或删除指定的类。它并不关心它之前是否存在。 |
语法
以下是 classList 属性的语法 −
element.classList
示例
让我们看一个 HTML DOM classList 属性的示例 −
<!DOCTYPE html>
<html>
<head>
<style>
.firstDiv {
width: 200px;
height: 200px;
padding: 15px;
border: 1px double blue;
position:relative;
top:10px;
}
.secondDiv {
background-color: lightgreen;
color: red;
}
.thirdDiv {
text-transform: capitalize;
text-align: center;
font-size: 30px;
}
</style>
</head>
<body>
<p>Click the below button to add class to the below div element</p>
<button onclick="classAdd()">ADD CLASS</button>
<br>
<div id="DIV1">
sample div
</div>
<script>
function classAdd() {
document.getElementById("DIV1").classList.add("firstDiv", "secondDiv", "thirdDiv");
}
</script>
</body>
</html>
输出
这将产生以下输出 −
点击"添加类"按钮 −
在上面的例子中 −
我们创建了一个 div 元素和三个 CSS 样式类，稍后我们会将它们添加到 div 中 −
.firstDiv {
width: 200px;
height: 200px;
padding: 15px;
border: 1px double blue;
position:relative;
top:10px;
}
.secondDiv {
background-color: lightgreen;
color: red;
}
.thirdDiv {
text-transform: capitalize;
text-align: center;
font-size: 30px;
}
<div id="DIV1">
sample div
</div>
然后，我们创建了一个按钮"ADD CLASS"，当点击 − 时，它将执行 classAdd() 方法。
<button onclick="classAdd()">ADD CLASS</button>
classAdd() 方法获取与 “DIV1” id 关联的元素，在本例中为 <div> 元素。然后，使用 classlist 属性及其 add() 方法，我们将 firstDiv、secondDiv 和 thirdDiv 类添加到 <div> 元素 −
function classAdd() {
document.getElementById("DIV1").classList.add("firstDiv", "secondDiv", "thirdDiv");
}
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
