JavaScript 向元素新增類

Ammar Ali 2021年10月2日 2021年7月3日
JavaScript 向元素新增類

本教程將討論使用 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 檔案中並使用瀏覽器開啟它。

輸出:

JavaScript 使用 classList 屬性新增類

正如你在輸出中看到的,有一個按鈕和一些文字。當你按下此按鈕時,文字的類別將被更改。

按下按鈕時的輸出:

JavaScript 使用按鈕新增類

正如你在輸出中看到的那樣,由於類的變化,文字形狀發生了變化。在此示例中,我們使用按鈕來更改元素的類,但你可以更改要更改給定元素類的條件。你不能在 Internet Explorer 9 中使用 classList 屬性。相反,你可以使用 += 運算子將該屬性新增到給定元素。你必須使用以下行更改指令碼標記內 myFun 函式的最後一行。

ob.className += " newclass";

你必須在類名前使用空格,因為可能還有其他類存在。

Author: Ammar Ali
Ammar Ali avatar Ammar Ali avatar

Hello! I am Ammar Ali, a programmer here to learn from experience, people, and docs, and create interesting and useful programming content. I mostly create content about Python, Matlab, and Microcontrollers like Arduino and PIC.

LinkedIn Facebook

相關文章 - JavaScript Class