如何用 JavaScript 更改元素的 class？

className 屬性用於更改元素的 class。此處，我們將看到兩個示例 −

  • 如何使用 className 屬性更改元素的 class。
  • 如何在舊類和新類之間切換。

使用 className 屬性更改元素的 class

在此示例中，我們將使用 className 屬性更改元素的 class。假設我們有一個 class 為 oldStyle 的 div −

<div id="mydiv" class="oldStyle">
   <p>The div...</p>
</div>

我們將使用 className 屬性將上述 oldStyle class 設定為新 class，即 newStyle −

function demoFunction() {
   document.getElementById("mydiv").className = "newStyle";
}

我們透過點選以下按鈕上的 demoFunction() 來實現上述操作 −

<p>Click the below button to change the class</p>
<button onclick="demoFunction()">Change Class</button>

示例

讓我們看完整的示例 −

<!DOCTYPE html>
<html>
<style>
   .oldStyle {
      background-color: yellow;
      padding: 5px;
      border: 2px solid orange;
      font-size: 15px;
   }
   .newStyle {
      background-color: green;
      text-align: center;
      font-size: 25px;
      padding: 7px;
   }
</style>
<body>
   <h1>Changing the class</h1>
   <p>Click the below button to change the class</p>
   <button onclick="demoFunction()">Change Class</button>
   <div id="mydiv" class="oldStyle">
      <p>The div...</p>
   </div>
   <script>
      function demoFunction() {
         document.getElementById("mydiv").className = "newStyle";
      }
   </script>
</body>
</html>

在新舊類之間切換

示例

我們還可建立一個同時適用於兩種方式（即切換）的按鈕。再次點選按鈕將切換回來 −

<!DOCTYPE html>
<html>
<style>
   .oldStyle {
      background-color: yellow;
      padding: 5px;
      border: 2px solid orange;
      font-size: 15px;
   }
   .newStyle {
      background-color: green;
      text-align: center;
      font-size: 25px;
      padding: 7px;
   }
</style>
<body>
   <h1>Toggle the class</h1>
   <p>Click the below button to toggle the classes</p>
   <button onclick="demoFunction()">Toggle Class</button>
   <div id="mydiv" class="oldStyle">
      <p>The div...</p>
   </div>
   <script>
      function demoFunction() {
         const element = document.getElementById("mydiv");
         if (element.className == "oldStyle") {
            element.className = "newStyle";
         } else {
            element.className = "oldStyle";
         }
      }
   </script>
</body>
</html>

更新日期: 2022 年 10 月 18 日

389 次瀏覽

開啟你的 職業生涯

完成課程並獲得認證

開始
廣告