Nama kelas Elemen DOM HTML
Objek ElemenContoh
Setel atribut kelas untuk sebuah elemen:
element.className = "myStyle";
Dapatkan atribut kelas "myDIV":
let value = document.getElementById("myDIV").className;
Beralih di antara dua nama kelas:
if (element.className == "myStyle") {
element.className = "newStyle";
} else {
element.className = "myStyle";
}
Lebih banyak contoh di bawah ini.
Definisi dan Penggunaan
Properti className
menetapkan atau mengembalikan atribut kelas elemen.
Sintaksis
Kembalikan properti className:
HTMLElementObject.className
Setel properti className:
HTMLElementObject.className = class
Nilai properti
Value | Description |
class |
The class name(s) of an element. Separate multiple classes with spaces, like "test demo". |
Nilai Kembali
Type | Description |
String | The class, or a space-separated list of classes, of an element |
Lebih Banyak Contoh
Dapatkan atribut class dari elemen <div> pertama (jika ada):
let value = document.getElementsByTagName("div")[0].className;
Dapatkan atribut kelas dengan beberapa kelas:
<div id="myDIV" class="myStyle test example">
<p>I am myDIV.</p>
</div>
let value = document.getElementById("myDIV").className;
Timpa atribut kelas yang ada dengan yang baru:
element.className = "newClassName";
Untuk menambahkan kelas baru, tanpa menimpa nilai yang ada, tambahkan spasi dan kelas baru:
element.className += " class1 class2";
jika "myDIV" memiliki kelas "myStyle", ubah ukuran font:
const elem = document.getElementById("myDIV");
if (elem.className == "mystyle") {
elem.style.fontSize = "30px";
}
Jika Anda menggulir 50 piksel dari bagian atas halaman ini, kelas "tes" ditambahkan:
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 50) {
document.getElementById("myP").className = "test";
} else {
document.getElementById("myP").className = "";
}
}
Dukungan Peramban
element.className
didukung di semua browser:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | Yes | Yes | Yes | Yes | Yes |
Objek Elemen