How To

Cara Membuat Toggle Class

Di bawah ini kita akan mempelajari cara menambahkan dan menghapus nama kelas dari elemen dengan JavaScript.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.mystyle {
  width: 100%;
  padding: 25px;
  background-color: blue;
  color: white;
  font-size: 25px;
  box-sizing: border-box;
}
</style>
</head>
<body>

<p>Klik tombol di bawah ini untuk melihat toggle class menambahkan dan menghapus nama kelas "mystyle" dari elemen DIV:</p>

<button >var element = document.getElementById("myDIV");
   element.classList.toggle("mystyle");
}
</script>

</body>
</html>

Toggle Class

Langkah 1) Tambahkan HTML:
Toggle Class untuk menambahkan nama kelas ke elemen div dengan id = “myDIV” (dalam contoh ini kita menggunakan tombol untuk mengganti nama kelas).
Contoh

<button >

Langkah 2) Tambahkan CSS:
Tambahkan nama kelas untuk beralih:
Contoh

.mystyle {
  width: 100%;
  padding: 25px;
  background-color: yellow;
  color: white;
  font-size: 25px;
  box-sizing: border-box;
}

Langkah 3) Tambahkan JavaScript:
Dapatkan elemen <div> dengan id = “myDIV” dan beralih di antara kelas “mystyle”:
Contoh

function myFunction() {
  var element = document.getElementById("myDIV");
  element.classList.toggle("mystyle");
}

Solusi lintas browser

Catatan: Properti classList tidak didukung di Internet Explorer 9. Contoh berikut menggunakan solusi lintas-browser / kode fallback untuk IE9:
Contoh

var element = document.getElementById("myDIV");

if (element.classList) {
  element.classList.toggle("mystyle");
} else {
  // For IE9
  var classes = element.className.split(" ");
  var i = classes.indexOf("mystyle");

  if (i >= 0)
    classes.splice(i, 1);
  else
    classes.push("mystyle");
    element.className = classes.join(" ");
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.mystyle {
  width: 100%;
  padding: 25px;
  background-color: red;
  color: white;
  font-size: 25px;
  box-sizing: border-box;
}
</style>
</head>
<body>

<p> Klik tombol "Coba" untuk melihat toggle class menambahkan dan menghapus nama kelas "mystyle" dari elemen DIV: </p>

<p> <strong> Catatan: </strong> Properti classList tidak didukung di IE9 dan yang lebih lama. Dalam contoh ini, kita memeriksa apakah browser mendukung metode classList.toggle (). Jika tidak, gunakan properti className bersama dengan properti dan metode JS lainnya untuk mendapatkan hasil yang sama (untuk IE9). </p>

<button >

Hanifah Nurbaeti

Share
Tags: CSSHow To