在 JavaScript 中更改 CSS 类
每当我们在 JavaScript 中处理 DOM 元素时，有时和情况下我们需要为 HTML 元素提供一些交互。例如，在用户单击时更改元素的背景颜色、隐藏元素、修改元素的外观等。这在大多数情况下可以通过更改类来完成。
JavaScript 语言为你提供了完成所有这些的不同方式。让我们看看可以使用哪些方法来更改 HTML 元素中的 CSS 类。
在 JavaScript 中更改 CSS 类的各种方法
下面我们有一个 HTML 文档，它由 body 标签内的单个 div 元素组成。我们还有一个 style 标签，它包含一个 id 和两个类。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
#dimensions{
width: 500px;
height: 500px;
}
.bg_1{
background-color: crimson;
}
.bg_2{
background-color: teal;
}
</style>
</head>
<body>
<div id="dimensions" class="dimensions bg_1">
<script>
let myDiv = document.getElementById('dimensions');
myDiv.addEventListener("click", function(e) {
});
</script>
</body>
</html>
名为 dimensions 的 id 包含宽度和高度。bg_1 和 bg_2 是具有 background-color 属性的两个类，分别具有 crimson 和 teal 颜色。dimension 和 bg_1 应用于 body 标签内的 HTML 元素。
从代码中，你可以看到我们已经通过使用 document.getElementById() 方法并将该元素 id（在本例中为 dimensions）作为字符串传递而将 div 元素存储在 myDiv 变量中在里面。
我们的目标是通过将类 bg_1 更改为 bg_2，将 div 元素的背景颜色从深红色更改为蓝绿色。只有当用户在 div 元素上时才会这样做。为此，我们还在 JavaScript 中的 myDiv 变量上使用 addEventListener() 方法添加了 onClick 事件。
我们将采用各种方法来实现这一点，如下所示。我们将在下面编写的所有代码都将放在 script 标签下的 addEventListener() 方法中。
使用 className 方法
在 JavaScript 中更改 CSS 类的最简单方法是使用 className 方法。使用此方法，你可以用一些其他类替换 HTML 元素上已经存在的任何现有类。你可以将要添加的所有新类指定为带有空格分隔的字符串。
myDiv.className = 'bg_2';
请注意，这将用新类替换元素上存在的所有现有类。
使用 classList.remove 和 classList.add 方法
在 classList 方法的帮助下，可以访问 HTML 元素上存在的所有类。使用 classList.remove，你可以删除特定的类，使用 classList.add，你可以向元素添加新类。在我们的示例中，我们将首先使用 classList.remove 删除 bg_1 类，然后使用 classList.add 添加新类，即 bg_2，如下所示。
myDiv.classList.remove("bg_1");
myDiv.classList.add("bg_2");
这就是我们如何使用这些方法更改 CSS 类。
使用 classList.replace() 方法
更改 CSS 类的另一种方法是使用 classList.replace() 方法。此方法有两个参数，第一个是要替换的元素上已经存在的现有类（在本例中为 bg_1），第二个是要添加到元素的新类（在这种情况下 bg_2）。
myDiv.classList.replace('bg_1', 'bg_2');
这些是我们可以在 JavaScript 中更改 CSS 类的一些方法。
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn