在 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_1bg_2 是具有 background-color 属性的两个类,分别具有 crimsonteal 颜色。dimensionbg_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.removeclassList.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 类的一些方法。