JavaScript 向元素新增類
Ammar Ali
2024年2月15日
本教程將討論使用 JavaScript 中的 classList 屬性向給定元素新增類。
使用 JavaScript 中的 classList 屬性向給定元素新增類
如果要向 JavaScript 中的給定元素新增類，可以使用 classList 屬性。首先，你必須獲取給定的元素，最簡單的方法是使用其 id 來獲取它。假設沒有給元素一個 id；在這種情況下，你可以給它一個唯一的 id 並使用 JavaScript 中的 getElementById 屬性獲取元素並將其儲存在一個變數中。之後，你可以使用該變數通過 classList 屬性更改其屬性。例如，讓我們使用按鈕更改文字的類。請參考下面的程式碼。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
.newclass {
width: 90%;
padding: 30px;
background-color: red;
color: yellow;
font-size: 30px;
}
</style>
<body>
<button onclick="myFun()">Try it</button>
<div id="test">
Adding Class Test
</div>
<script type="text/javascript">
function myFun() {
var ob = document.getElementById("test");
ob.classList.add("newclass");
}
</script>
</body>
</html>
在上面的程式碼中，我們有一個樣式標籤，我們在其中設定類物件的屬性；在 body 標籤內，我們有一個按鈕和一些文字，在 script 標籤內，我們正在使用其 id 更改文字的類。在此示例中，樣式表和 JavaScript 程式碼放在同一個 HTML 檔案中，但你也可以將它們放在單獨的檔案中並將它們連結到 HTML 檔案。要執行上述程式碼，你需要將程式碼複製到一個 HTML 檔案中並使用瀏覽器開啟它。
輸出：
正如你在輸出中看到的，有一個按鈕和一些文字。當你按下此按鈕時，文字的類別將被更改。
按下按鈕時的輸出：
正如你在輸出中看到的那樣，由於類的變化，文字形狀發生了變化。在此示例中，我們使用按鈕來更改元素的類，但你可以更改要更改給定元素類的條件。你不能在 Internet Explorer 9 中使用 classList 屬性。相反，你可以使用 += 運算子將該屬性新增到給定元素。你必須使用以下行更改指令碼標記內 myFun 函式的最後一行。
ob.className += " newclass";
你必須在類名前使用空格，因為可能還有其他類存在。
作者： Ammar Ali
