首頁 >web前端 >js教程 >如何使用 JavaScript 更改元素的類別？

如何使用 JavaScript 更改元素的類別？

PHPz轉載: 2023-08-30 14:29:041315瀏覽

如何使用 JavaScript 更改元素的类？

className 屬性用於更改元素的類別。在這裡，我們將看到兩個例子 -

如何使用 className 屬性來變更元素的類別。
如何在新舊課程之間切換。

使用 className 屬性更改元素的類別

在此範例中，我們將使用 className 屬性來變更元素的類別。假設我們有一個帶有 oldStyle 類別的 div -

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

我們將使用 className 屬性將上面的 oldStyle 類別設定為一個新類，即 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>

以上是如何使用 JavaScript 更改元素的類別？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：JavaScript 程式求矩形的面積和周長下一篇：JavaScript 程式求矩形的面積和周長

看更多