Cara Mengubah Class Menggunakan JavaScript

8/19/2023
Beranda
Pemrograman
Teknologi
Cara Mengubah Class Menggunakan JavaScript
Cara Mengubah Class Menggunakan JavaScript

Properti className digunakan untuk mengubah kelas elemen. Di sini, kita akan melihat dua contoh penggunaan properti className.

  • Cara mengubah kelas elemen menggunakan properti className.
  • Cara beralih antara kelas lama dan baru.

Cara Mengubah class suatu elemen menggunakan properti className

Dalam contoh ini, kita akan mengubah kelas elemen menggunakan properti className. Katakanlah kita memiliki div dengan kelas oldStyle −

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

Kita akan mengatur kelas oldStyle di atas ke kelas baru yaitu newStyle menggunakan properti className 

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

Kita dapat mengubah class di atas dengan memanggil demoFunction() dengan mengklik tombol berikut -

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

Contoh

Mari kita lihat contoh lengkapnya -

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

Cara beralih antara kelas baru dan lama

Contoh

Kita juga dapat membuat tombol yang berfungsi untuk kedua cara yaitu beralih. Klik tombol lagi akan mengalihkannya 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>

Postingan Lama
Postingan Lebih Baru