在 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 類的一些方法。