Cara - Toggle Class
Beralih antara menambahkan dan menghapus nama kelas dari elemen dengan JavaScript.
Klik tombol untuk mengganti nama kelas!
Beralih Kelas
Langkah 1) Tambahkan HTML:
Beralih antara menambahkan nama kelas ke elemen div dengan id="myDIV" (dalam contoh ini kami menggunakan tombol untuk mengganti nama kelas).
Contoh
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
This is a DIV element.
</div>
Langkah 2) Tambahkan CSS:
Tambahkan nama kelas untuk beralih:
Contoh
.mystyle {
width: 100%;
padding:
25px;
background-color: coral;
color: white;
font-size: 25px;
}
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");
}
Tip: Lihat juga Cara Menambahkan Kelas .
Tip: Lihat Juga Cara Menghapus Kelas .
Tip: Pelajari lebih lanjut tentang properti classList di Referensi JavaScript kami.