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 onclick="myFunction()">Klik Di Sini</button> <div id="myDIV"> Elemen Div yang memakai toggle class. </div> <script> function myFunction() { 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 onclick="myFunction()">Klik Di Sini</button> <div id="myDIV"> Elemen Div yang memakai toggle class. </div>
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 onclick="myFunction()">Coba</button>
<div id="myDIV">
Elemen Div yang memakai toggle class.
</div>
<script>
function myFunction() {
var element = document.getElementById("myDIV");
if (element.classList) {
element.classList.toggle("mystyle");
} else {
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(" ");
}
}
</script>
</body>
</html>
