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>