如何在JavaScript中向DOM元素新增類？

HTML是一種標記語言，用於建立網頁的有用元素。DOM（文件物件模型）用於操作HTML文件。在DOM中，所有元素都被定義為物件。HTML文件中的樣式可以透過CSS來完成。在這裡，JavaScript被用來操作它們。

下面描述了向DOM元素新增類的方法。

使用className

如果元素已存在類，則它只會新增另一個類；如果不存在，則將元素新增到新類。

語法

在JavaScript中新增類元素的語法如下：

HTMLElemObj.className

示例1

在這個例子中，我們嘗試在JavaScript中向DOM元素新增一個類：

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Add an element to class </title>
   <style>
      .context{
         padding: 40px;
         border: 2px solid #A47167;
      }
      .highlight{
         background: lightblue;
      }
   </style>
</head>
<body>
   <div class="context" id="contextid">
      <p>By using className property we can add a class to a given element</p>
      <button type="button" onclick="nClass();">Click here to add a new class </button>
   </div>
   <script>
      function nClass(){
         var elem = document.getElementById("contextid");
         elem.className += " highlight";
      }
   </script>
</body>
</html>

使用classList

這種方法有一個名為“add”的方法，用於向元素新增類名。

語法

classList的語法如下：

elem.classList.add("className")

示例2

在這個例子中，我們將學習如何使用JavaScript向DOM元素新增類：

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Add a class to element</title>
   <style>
      .tutorix {
         background-color: orange;
         font-size: 35px;
      }
   </style>
</head>
<body>
   <button onclick="myClass()">Click</button>
   <div id="tp">Tutorilas Point</div>
   <script>
      function myClass() {
         var elem = document.getElementById("tp");
         elem.classList.add("tutorix");
      }
   </script>
</body>
</html>

執行上述程式碼後，它將顯示一個名為click的按鈕以及顯示文字“Tutorialspoint”的DOM元素。

單擊按鈕後，將向元素新增一個新類，從而更改其樣式。

更新於：2022年8月26日

915 次瀏覽

啟動您的職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.