Bagaimana untuk menukar kelas elemen menggunakan JavaScript?-tutorial js-php.cn

Bagaimana untuk menukar kelas elemen menggunakan JavaScript?

PHPz

Lepaskan： 2023-08-30 14:29:04

ke hadapan

1293 orang telah melayarinya

Atribut

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

className digunakan untuk menukar kelas elemen. Di sini kita akan melihat dua contoh -

Cara menukar kelas elemen menggunakan atribut className.
Bagaimana untuk bertukar antara kursus lama dan baru.

Tukar kelas elemen menggunakan atribut className

Dalam contoh ini, kami akan menukar kelas elemen menggunakan atribut className. Katakan kita mempunyai div dengan kelas oldStyle -

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

Salin selepas log masuk

Kami akan menggunakan atribut className untuk menetapkan kelas OldStyle di atas kepada kelas baharu, iaitu newStyle -

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

Salin selepas log masuk

Kami mencapai perkara di atas dengan memanggil demoFunction() dengan mengklik butang berikut -

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

Salin selepas log masuk

Contoh

Mari kita lihat contoh penuh -

<!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>

Salin selepas log masuk

Tukar antara kategori lama dan baharu

Contoh

Kami juga boleh mencipta butang yang berfungsi dua arah, iaitu togol. Mengklik butang sekali lagi menukarnya kembali -

<!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>

Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk menukar kelas elemen menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!