在 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