JavaScript classList

JavaScript classList 是 JavaScript 的一个 DOM 属性，它允许操作元素的 CSS (层叠样式表) 类。JavaScript classList 是一个只读属性，返回 CSS 类名。与 JavaScript 中的其他属性如 style 和 className 相比，classList 是一个 JavaScript 属性。style 属性返回 CSS 类元素的颜色或其他样式，而 className 用于返回 CSS 文件中使用的类名。然而，className 和 classList 属性都返回 CSS 文件中使用的类名，但方式不同。className 属性以字符串形式返回类名，而 JavaScript 的 classList 属性以数组形式返回类名。

在这里，我们将简要讨论 JavaScript classList，并讨论其方法及其在实际中的应用。

JavaScript classList 属性示例

下面是一个 JavaScript classList 属性的例子，通过它可以获得元素的类值。

上述代码的输出如下所示

JavaScript classList 属性

classList 属性用于表示类元素的值，它是一个 DOMTokenList 对象。这是一个只读属性，但我们可以通过操作程序中使用的类来修改其值。JavaScript classList 属性包含以下方法，通过这些方法我们可以对类元素执行不同的操作：

• add()： add() 方法用于向元素添加一个或多个类。
• remove()： remove() 方法用于从元素当前存在的类中移除一个或多个类。
• toggle()： toggle() 方法用于切换元素的指定类名。这意味着单击一次会添加指定的类，再单击一次会移除该类。它被称为元素的切换属性。
• replace()： replace() 方法用于将现有类替换为新类。
• contains()： JavaScript classList 属性的 contains() 方法用于返回布尔值。如果类存在，则返回 true，否则返回 false。
• item()： item() 方法用于显示特定索引处的类名。因此，它返回类名。

这些是 JavaScript classList 中使用的一些方法。

我们将逐一讨论。

classList.add()

用于向 CSS 元素添加一个或多个类的函数。

示例

下面的例子展示了如何使用 classList.add() 方法添加一个类

在代码中，当用户点击按钮时，新的类会与现有的类一起被添加。点击按钮后的输出如下所示

classList.remove()

remove() 函数用于从元素中移除现有的类。

下面的例子展示了如何使用 classlist.remove() 方法移除一个或多个类

在上面的代码中，当用户点击按钮时，特定的类会被从现有的 CSS 类中移除。点击按钮后的输出如下所示

Classlist.toggle()

toggle() 按钮用于切换元素的类。这意味着添加一个新类或移除现有类。

下面是一个例子，让我们了解如何使用 toggle() 方法来添加或移除类。

示例

在代码中，当用户点击按钮时，类会被添加到 CSS 类中或从 CSS 类中移除。点击按钮后的输出如下所示

Classlist.contains()

contains() 方法用于检查指定的类是否存在于 CSS 类中，并据此返回布尔值 true 或 false。

下面是一个例子，展示了如何使用 contains() 方法搜索一个类是否存在

示例

在上面的代码中可以看出，当用户点击按钮时，它会检查指定的类是否存在于 CSS 类中。如果存在，则返回布尔值 true。否则，返回 false。点击按钮后上述代码的输出如下所示

classlist.replace()

replace() 方法用于将一个现有的类替换为一个新类。这并不意味着类从元素中被移除，而是现有类的属性被新类的属性替换。

下面是一个例子，通过它我们可以了解如何用新类替换现有类

示例

在上面的代码中，当用户点击按钮时，现有类的属性会被新类的属性替换。点击按钮后的输出如下所示

classList.item()

item() 函数用于返回位于指定索引值处的类的名称。

下面是一个例子，让我们了解如何使用 item() 方法返回值

示例

在代码中，当用户点击按钮时，位于指定索引处的类将被显示。点击按钮后，我们得到指定的索引类值，如下所示

这些是 classList DOM 对象的一些方法以及关于 classList 的所有内容。