JavaScript classList

摘要：在本教程中，您将学习如何使用 JavaScript 的 classList 属性来操作元素的 CSS 类。

JavaScript classList 属性简介

classList 是元素的只读属性，它返回一个 CSS 类的实时集合

const classes = element.classList;Code language: JavaScript (javascript)

classList 是一个 DOMTokenList 对象，它表示元素的类属性的内容。

尽管 classList 是只读的，但您可以使用各种方法来操作它包含的类。

JavaScript classList 示例

让我们来看一些通过 classList 接口操作元素的 CSS 类的示例。

1) 获取元素的 CSS 类

假设您有一个带有两个类的 div 元素：main 和 red。

<div id="content" class="main red">JavaScript classList</div>Code language: HTML, XML (xml)

以下代码在控制台窗口中显示 div 元素的类列表

let div = document.querySelector('#content');
for (let cssClass of div.classList) {
    console.log(cssClass);
}Code language: JavaScript (javascript)

输出

main
red

工作原理

• 首先，使用 querySelector() 方法选择 id 为 content 的 div 元素。
• 然后，迭代 classList 中的元素，并在控制台窗口中显示类。

2) 向元素的类列表添加一个或多个类

要向元素的类列表添加一个或多个 CSS 类，请使用 classList 的 add() 方法。

例如，以下代码将 info 类添加到 id 为 content 的 div 元素的类列表中

let div = document.querySelector('#content');
div.classList.add('info');Code language: JavaScript (javascript)

以下示例将多个 CSS 类添加到元素的类列表中

let div = document.querySelector('#content');
div.classList.add('info','visible','block');Code language: JavaScript (javascript)

3) 删除元素的类

要从元素的类列表中删除 CSS 类，请使用 remove() 方法

let div = document.querySelector('#content');
div.classList.remove('visible');Code language: JavaScript (javascript)

与 add() 方法一样，您也可以一次删除多个类

let div = document.querySelector('#content');
div.classList.remove('block','red');Code language: JavaScript (javascript)

4) 替换元素的类

要将现有 CSS 类替换为新的 CSS 类，请使用 replace() 方法

let div = document.querySelector('#content');
div.classList.replace('info','warning');Code language: JavaScript (javascript)

5) 检查元素是否具有指定的类

要检查元素是否具有指定的类，请使用 contains() 方法

let div = document.querySelector('#content');
div.classList.contains('warning'); // trueCode language: JavaScript (javascript)

如果 classList 包含指定的类，则 contains() 方法返回 true；否则返回 false。

6) 切换类

如果元素的类列表包含指定的类名，则 toggle() 方法会将其删除。如果类列表不包含类名，则 toggle() 方法会将其添加到类列表中。

以下示例使用 toggle() 方法来切换 id 为 content 的元素的 visible 类

let div = document.querySelector('#content');
div.classList.toggle('visible');Code language: JavaScript (javascript)

总结

• 元素的 classList 属性返回元素的 CSS 类的实时集合。
• 使用 add() 和 remove() 方法来向元素的类列表添加 CSS 类和从元素的类列表中删除 CSS 类。
• 使用 replace() 方法将现有类替换为新的类。
• 使用 contains() 方法来检查元素的类列表是否包含指定的类。
• 使用 toggle() 方法来切换类。

测验