JavaScript classList() 属性和方法解释

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()方法将删除该类名，反之亦然。

例如，假设您有一个

元素如下：

Hello World! This is a paragraph element.

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

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

paragraph.classList.toggle("red"); // false

paragraph.classList.toggle("red"); // true

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

结论

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