tutorial pengembangan web terbaru
 

HTML DOM className Propery

<Elemen Object

Contoh

Mengatur kelas untuk <div> elemen dengan id = "myDiv":

document.getElementById("myDIV").className = "mystyle";
Cobalah sendiri "

Lebih "Try it Yourself" contoh di bawah ini.

Definisi dan Penggunaan

The className set properti atau mengembalikan nama kelas elemen (nilai atribut kelas elemen ini).

Tip: Sebuah properti yang mirip dengan className adalah classList properti.

Dukungan Browser

Milik
className iya nih iya nih iya nih iya nih iya nih

Sintaksis

Kembali properti className:

HTMLElementObject .className

Mengatur properti className:

HTMLElementObject .className= class

Nilai properti

Nilai Deskripsi
class Menentukan nama kelas elemen. Untuk menerapkan beberapa kelas, pisahkan dengan spasi, seperti "test demo"

Rincian teknis

Kembali Nilai: Sebuah String, yang mewakili kelas, atau daftar dipisahkan dengan spasi dari kelas, dari unsur
contoh

Contoh lebih

Contoh

Dapatkan nama kelas yang pertama <div> elemen dalam dokumen (if any) :

var x = document.getElementsByTagName("DIV")[0].className;

Hasil x akan:

mystyle
Cobalah sendiri "

Contoh

contoh lain tentang cara untuk mendapatkan nama kelas elemen:

var x = document.getElementsByClassName("mystyle")[0].className;
var y = document.getElementById("myDIV").className;
Cobalah sendiri "

Contoh

Dapatkan nama-nama kelas elemen dengan beberapa kelas:

<div id="myDIV" class="mystyle test example">I am a DIV element</div>

var x = document.getElementById("myDIV").className;

Hasil x akan:

mystyle text example
Cobalah sendiri "

Contoh

Timpa nama kelas yang ada dengan yang baru:

<div id="myDIV" class="mystyle">I am a DIV element</div>

document.getElementById("myDIV").className = "newClassName";
Cobalah sendiri "

Contoh

Untuk menambahkan kelas untuk elemen, tanpa Timpa nilai-nilai yang ada, menyisipkan spasi dan nama kelas baru:

document.getElementById("myDIV").className += " anotherClass";
Cobalah sendiri "

Contoh

Jika ada kelas "mystyle" dalam elemen dengan id = "myDiv", mengubah font-size-nya:

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

if (x.className === "mystyle") {
    x.style.fontSize = "30px";
}
Cobalah sendiri "

Contoh

Beralih antara nama kelas pada posisi scroll yang berbeda - Ketika pengguna gulungan bawah 50 pixel dari atas, nama kelas "test" akan ditambahkan ke elemen (and removed when scrolled up again) .

window.onscroll = function() {myFunction()};

function myFunction() {
    if (document.body.scrollTop > 50) {
        document.getElementById("myP").className = "test";
    } else {
        document.getElementById("myP").className = "";
    }
}
Cobalah sendiri "

Pages terkait

CSS Tutorial: CSS Selectors

CSS Referensi: CSS .class Selector

HTML DOM Referensi: HTML DOM classList Property

HTML DOM Referensi: HTML DOM getElementsByClassName() Method

HTML DOM Referensi: HTML DOM Style Object

<Elemen Object