classList属性是 HTML 元素的一个属性，它保存当前选定元素的类名。您可以使用该属性将 HTML 元素的类名作为数组获取。

例如，假设您的<body>标签中有以下 HTML 元素：

<body>
  <div id="header" class="navbar open">Header div</div>
</body>

您可以<div>使用该document.getElementById()方法获取上面的元素，然后您可以使用classNameorclassList属性获取元素的类名。

className属性以字符串形式返回类名，而属性classList以数组形式返回类名：

const div = document.getElementById("header");
console.log(div.className); // "navbar open"

console.log(div.classList); // ["navbar", "open"]
console.log(div.classList[0]); // "navbar"
console.log(div.classList[1]); // "open"

该classList属性是只读属性。如果要操作 HTML 元素的类，则需要使用classList属性中包含的方法。它们如下：

  • add()
  • contains()
  • item()
  • remove()
  • toggle()

让我们从方法开始了解这些方法是如何工作的add()。

classList add() 方法解释

该add()方法允许您向元素添加一个或多个类名。您只需要将要添加的类名作为逗号分隔的字符串传递：

<div>下面是向上面的元素添加新类名的示例：

const div = document.getElementById("header");
div.classList.add("expand");

如果类名已经存在于元素上，则不会再次将其添加到元素中。下面的代码什么也不做，因为类名"navbar"已经存在于上面的<div>元素中：

div.classList.add("navbar");

接下来，让我们了解contains()方法的工作原理。

classList contains() 方法解释

该contains()方法将检查元素的class属性并检查它是否包含特定的类名。

您需要将要检查的类名作为其参数传递。true如果类名存在或false不存在，该方法将返回。

例如，以下是检查元素是否"navbar"存在类的方法：

const div = document.getElementById("header");
div.classList.contains("navbar"); // true
div.classList.contains("lg-block"); // false

这就是contains()方法的全部内容。接下来，我们有item()方法。

classList item() 方法解释

classList 属性的item()方法返回您指定为其参数的索引处的类名。它的工作方式与使用classList[index]检查相同，但指定索引不存在时除外：

const div = document.getElementById("header");

console.log(div.classList.item(0)); // "navbar"
console.log(div.classList.item(1)); // "open"
console.log(div.classList.item(2)); // null

console.log(div.classList[0]); // "navbar"
console.log(div.classList[1]); // "open"
console.log(div.classList[2]); // undefined

从上面的代码可以看出，该item()方法返回null，但是当索引不存在时classList[index]检查返回。undefined

接下来，让我们学习remove()方法。

classList remove() 方法解释

该classList.remove()方法允许您从 HTML 元素中删除一个或多个类名。与该add()方法一样，您需要将要删除的类名作为逗号分隔的字符串传递。您可以根据需要传递任意数量的字符串参数：

const div = document.getElementById("header");
// remove three class names
div.classList.remove("navbar", "expand", "lg-block");

当元素的属性中不存在您要删除的类名时class，JavaScript 将继续并尝试删除您传递给方法的下一个类名。

换句话说，删除一个不存在的类不会引发错误。

最后，让我们看看该toggle()方法是如何工作的。

classList toggle() 方法说明

该classList.toggle()方法允许您根据当前class属性值添加或删除类名。

如果要切换的类名已经存在于元素中，则该toggle()方法将删除该类名，反之亦然。

例如，假设您有一个<p>元素如下：

<p id="header" class="red">Hello World! This is a paragraph element.</p>

您可以调用该toggle()方法一次以从元素中删除该类"red"，如下面的代码所示：

const paragraph = document.getElementById("header");
paragraph.classList.toggle("red"); // false
paragraph.classList.toggle("red"); // true

您可以通过它返回的值知道该toggle()方法是否添加或删除了一个类。如果类名被删除，toggle()将返回false. 添加类名后，将返回true.

结论

您刚刚了解了classList属性以及如何使用提供的方法来操作 HTML 元素的类名。现在继续尝试操作您自己的 HTML 元素的类😉

# javascript # 前端 # html
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

Redis开源社区持续壮大，华为云为Valkey项目注入新的活力

avatar 华为云开发者联盟
cover

CCE云原生混部场景下的测试案例

avatar 华为云开发者联盟
cover

详解数仓的3A安全能力

avatar 华为云开发者联盟