如何使用 JavaScript 为元素添加多个类？

JavaScript 是软件开发人员和网页设计师使用的灵活、强大的编程语言之一。它有数千种应用，可用于开发各种 Web 应用程序和网站，甚至移动应用程序。本文将探讨使用 JavaScript **添加多个类**的方法，以及最佳实践、优点和故障排除建议。

如何使用 JavaScript 添加多个类？

使用 JavaScript 添加多个类很简单。可以使用三个类方法。它们包括 classList.add()、.className 和 setAttribute。该方法接受一个或多个 类名，并将它们分配给 DOM 中的元素。此外，还有一个 classList.remove() 方法可用于从 DOM 中删除类。最后，classList.toggle() 方法可用于为特定元素启用或禁用类。

应指出的是，classList.add() 和 classList.remove() 方法接受多个类名作为其参数。此功能有助于同时添加或删除多个类，这在有效管理同一元素上的不同类时非常有用。此外，classList.toggle() 方法也可以接受多个类名作为参数。在这种情况下，允许多个类同时打开和关闭。

在大多数情况下，我们将看到修改一个或多个 HTML 元素以及基于用户事件的自定义 CSS 属性的示例。这些动态更改可以使用 JavaScript 完成。现在让我们详细了解如何在 JavaScript 中添加类。

利用 .className 属性

.className 属性是类操作最直接和标准的方法。它能够以 JavaScript 添加类，以及检索已应用于元素的任何类的名称。此外，.className 属性可用于将多个类应用于一个元素。

语法

属性值

newClass：此部分必须用双引号括起来，以包含新的类名。可以通过在每个新类名后加一个空格来包含多个类名。

多个类的语法

返回值

.className 属性的返回值是一个字符串，它引用一个或多个类。

代码

输出

当我们单击按钮时，它将显示为绿色句子，如下所示

在上面的代码中，使用了非常简单的 HTML 布局，其中包含一个标题、一个段落和一个带有 onclick() 事件的按钮，该事件设计在按钮被单击时执行。在 JavaScript 代码中，编写了一个 addingClass() 函数。它尝试通过 ID 查找段落元素。找到元素后，将使用 .className 属性向其添加类名。

在 ClassList 中使用 .add() 方法

JavaScript 可以使用的另一种添加类的方法是 .add() 方法。将类附加到元素的另一种方法是 .classList 属性。它还支持将多个类添加到单个元素。

语法

属性值

.classList 属性是不可写的，但它有一个 .add() 方法，可以通过该方法在 JavaScript 中添加类。与 .classList 关联的 .add() 方法将类名或类名作为双引号内的字符串。

返回值

.classList() 的返回类型是 DOMTokenList，它包含由空格分隔的令牌列表。

让我们用一个例子来说明这一点。

代码

输出

单击 AddClass 按钮后

在给定的示例中，它使用了与前面示例相同的基本 HTML 结构。它包含一个触发 on-click() 事件的按钮，一旦单击该按钮，该按钮就会调用 JavaScript 函数。在 JavaScript 部分，有一个名为 addClass() 的函数。此特定函数使用 querySelector 选择段落类。在选择元素后，通过使用 .classList.add() 添加类名。

使用 setAttribute 方法添加类

setAttribute 方法通过将值分配给元素的属性来添加类。如果属性已存在，它将更新其值；否则，将创建一个新属性并将其分配给它。

语法

setAttribute 方法需要两个参数。它包括要引入的属性的 name 和要分配给该特定属性的 value。

让我们在此处重现 .add() 的输出。

代码

输出

单击 Add class 按钮后

在上述场景中，我们正在使用上面讨论的相同框架。当前代码中唯一的区别在于 JavaScript 函数内部。在本例中，我们已将使用 .classList.add() 替换为使用 setAttribute() 方法，该方法使用 JavaScript 将 addCSS 类设置在 div HTML 元素上。我们应该使用此编译器来编译您的代码。

切换方法

如前所述，.classList 方法具有另一项功能，使用户可以在尚未分配类时使用 JavaScript 添加类；但是，如果已分配，则会删除该类。

语法

代码

输出

当我们单击 Toggle 按钮时

.classList 方法包含一个名为 .toggle() 的强大函数。此函数允许动态添加当前未分配的类。相反，如果类已存在，.toggle() 函数将删除它。

在 JavaScript 中合并多个类的优点

在代码中合并多个类有许多好处。它为开发人员提供了对元素样式的更多控制，从而可以快速更改任何页面的外观，而无需重写代码。此外，多个类可以轻松创建网页的多个版本，所有版本都基于相同的基本代码，只需更改类属性即可。

它还确保代码整洁易读。由于元素的样式和功能分别定义在不同的类中，因此可以轻松找出任何错误。此外，此实践减少了代码的总行数，因为一个类可以重用于多个元素，从而方便在项目中为其他元素重用它们。

结论

本文讨论了 **通过 JavaScript 添加多个类**，以及最佳实践和示例。通过遵循以下指南，可以将多个类集成到网页或应用程序的元素中：

请记住，在为元素分配一个以上的类时，会应用正确的格式和语法。认识到各种类之间可能发生的冲突也至关重要。最后，必须对代码进行全面测试，以确定类是否已按预期实现。