Element.classList 教程
最后修改于 2023 年 8 月 24 日
Element.classList 教程演示了如何使用 JavaScript 中的 classList 属性来读取和写入元素的类属性。
Element.classList
Element.classList 是一个只读属性，它返回一个元素类属性的集合。与通过 element.className 以空格分隔的字符串形式访问元素的类列表相比，它是一个更方便的选择。
为了将 HTML 插入文档而不是替换元素的内容，我们使用 insertAdjacentHTML 方法。
Element.classList 示例
以下示例演示了元素 classList 属性的用法。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Element.classList</title>
<link rel="stylesheet" href="main.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
</head>
<body>
<div id="mydiv" class="initial">
</div>
<button id="pck">Pick</button>
<script src="main.js"></script>
</body>
</html>
在文档中，我们有一个具有默认 initial 类的 div 元素。Pick 按钮随机挑选另一个类并将其放入 div 的类列表中。它还会输出 div 的当前类。
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
我们包含了 Lodash 库。
main.css
.initial { width: 200px; height: 100px; margin: 10px; padding:5px; border: 1px solid seagreen}
.steelblue { background-color: steelblue }
.lime { background-color: lime }
.olive { background-color: olive }
.sienna { background-color: sienna }
.silver { background-color: silver }
.skyblue { background-color: hsl(197, 71%, 73%) }
.teal { background-color: teal }
.khaki { background-color: khaki }
这是 main.css。我们有一些背景样式，我们会从 div 中添加或删除它们。
main.js
const classes = ['steelblue', 'lime', 'olive', 'sienna',
'silver', 'skyblue', 'teal', 'khaki'];
let btnPck = document.getElementById('pck');
let btnLst = document.getElementById('lst');
let myDiv = document.getElementById('mydiv');
btnPck.addEventListener('click', () => {
const active = myDiv.classList;
active.forEach(col => {
if (_.includes(classes, col)) {
myDiv.classList.remove(col);
}
})
myDiv.classList.add(_.sample(classes));
myDiv.innerHTML = myDiv.classList;
});
单击按钮时，我们会将随机样式应用于 div 元素。
const classes = ['steelblue', 'lime', 'olive', 'sienna',
'silver', 'skyblue', 'teal', 'khaki'];
我们有一个样式列表。
const active = myDiv.classList;
我们使用 classList 属性确定活动类。
active.forEach(col => {
if (_.includes(classes, col)) {
myDiv.classList.remove(col);
}
})
我们遍历活动类列表，在添加新类之前删除任何不是 initial 的类。
myDiv.classList.add(_.sample(classes));
我们将一个随机类添加到类列表中。我们使用 Lodash 的 _.sample 函数来随机选择一个元素。
myDiv.innerHTML = myDiv.classList;
活动类显示在 div 元素中。
在这篇文章中，我们使用了元素的 classList 属性。