JavaScript 向元素新增類
Ammar Ali
2021年10月2日
2021年7月3日
本教程將討論使用 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";
你必須在類名前使用空格,因為可能還有其他類存在。
Author: Ammar Ali