用 JavaScript 轻松添加和删除 class185

在 Web 开发中，给 HTML 元素动态添加或删除 class 是一个常见的需求。JavaScript 作为一门强大的编程语言，提供了多种方法来实现这一功能，让开发者可以轻松地操作元素的样式。

对于较新的浏览器，推荐使用 `classList` 属性。它提供了一组方法来操作元素的 class 列表，包括：

`add()` - 添加一个 class
`remove()` - 删除一个 class
`toggle()` - 切换一个 class（如果存在则删除，否则添加）
`contains()` - 检查元素是否包含一个 class

示例

const element = ("myElement");
// 添加 class "active"
("active");
// 删除 class "active"
("active");
// 切换 class "highlight"
("highlight");
// 检查 element 是否包含 class "selected"
if (("selected")) {
// 执行代码
}

className 属性

另一个用于操作 class 的方法是使用 `className` 属性。虽然它不如 `classList` 灵活，但仍然适用于较旧的浏览器。

示例

const element = ("myElement");
// 添加 class "active"
+= " active";
// 删除 class "active"
= (" active", "");
// 切换 class "highlight"
= (" highlight")
? (" highlight", "")
: + " highlight";

通过 CSSOM 添加/删除 class

最后，还可以通过 CSSOM（级联样式表对象模型）来操作 class。这涉及直接操作元素的 style 属性。

示例

const element = ("myElement");
// 添加 class "active"
("active");
// 删除 class "active"
("active");
// 切换 class "highlight"
("highlight");

性能注意事项

在大量元素上頻繁添加/删除 class可能会影響效能。建議盡量將 class操作限制在特定元素或小組元素上。此外，使用 `classList` 屬性比使用 `className` 屬性更有效率。

在 JavaScript 中操作 HTML 元素的 class 有多种方法。 `classList` 属性提供了最现代和灵活的方法，而 `className` 属性适用于较旧的浏览器。通过 CSSOM 也能操作 class，但效能較低。根据具体情况选择最适合的方法，可以轻松地实现元素样式的动态控制。

2025-01-31

---

上一篇：用 JavaScript 实现图片旋转

下一篇：标签云 JavaScript：增强网站可读性和导航