Rumah > Artikel > hujung hadapan web > Bagaimana untuk menukar kelas elemen menggunakan JavaScript?

Bagaimana untuk menukar kelas elemen menggunakan JavaScript?

PHPzke hadapan: 2023-08-30 14:29:041289semak imbas

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>

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

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

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>

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>

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>

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

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Program JavaScript untuk mencari luas dan perimeter segi empat tepatArtikel seterusnya：Program JavaScript untuk mencari luas dan perimeter segi empat tepat

Artikel berkaitan

Lihat lagi