HTML DOM classList Propery

<Elemen Object

Contoh

Tambahkan "mystyle" kelas untuk sebuah <div> elemen:

document.getElementById("myDIV").classList.add("mystyle");

Cobalah sendiri "

Lebih "Try it Yourself" contoh di bawah ini.

Definisi dan Penggunaan

Properti classList mengembalikan kelas name(s) dari suatu unsur, sebagai objek DOMTokenList.

Properti ini berguna untuk menambah, menghapus dan beralih kelas CSS pada elemen.

Properti classList adalah read-only, namun, Anda dapat memodifikasi dengan menggunakan add() dan remove() metode.

Solusi lintas-browser: Properti classList tidak didukung di IE9 dan sebelumnya. Namun, Anda dapat menggunakan className properti atau ekspresi reguler untuk solusi lintas-browser (lihat "More Examples" di bagian bawah halaman ini).

Dukungan Browser

Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.

Milik
classList	8,0	10,0	3.6	5.1	11,5

Sintaksis

element .classList

properti

Milik	Deskripsi
length	Mengembalikan jumlah kelas dalam daftar. Properti ini read-only

metode

metode	Deskripsi
add( class1, class2, ... )	Menambahkan satu atau lebih nama kelas untuk elemen. Jika kelas yang ditentukan sudah ada, kelas tidak akan ditambahkan
contains( class )	Mengembalikan nilai Boolean, menunjukkan apakah suatu elemen memiliki tertentu nama kelas. Kemungkinan nilai: benar - elemen berisi tertentu nama kelas palsu - unsur tidak mengandung nama kelas yang ditentukan
item( index )	Mengembalikan nama kelas dengan sejumlah indeks tertentu dari elemen. Indeks dimulai dari 0. Mengembalikan null jika indeks berada di luar jangkauan
remove( class1, class2, ... )	Menghapus satu atau lebih nama kelas dari elemen. Catatan: Menghapus kelas yang tidak ada, TIDAK melemparkan kesalahan
toggle( class, true\|false)	Matikan antara nama kelas untuk elemen. Parameter pertama menghilangkan kelas tertentu dari unsur, dan kembali palsu. Jika kelas tidak ada, itu akan ditambahkan ke elemen, dan nilai kembali benar. Opsional Parameter kedua adalah nilai Boolean yang memaksa kelas yang akan ditambahkan atau dihapus, terlepas dari apakah atau tidak itu sudah ada. Sebagai contoh: Hapus kelas: elemen .classList. toggle("classToRemove", false) ; Menambahkan kelas: elemen .classList. toggle("classToAdd", true) ; Catatan: Parameter kedua tidak didukung di Internet Explorer atau Opera 12 dan sebelumnya.

Rincian teknis

Kembali Nilai:	Sebuah DOMTokenList, berisi daftar kelas name(s) dari suatu unsur

Contoh lebih

Contoh

Menambahkan beberapa kelas ke <div> elemen:

document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");

Cobalah sendiri "

Contoh

Hapus kelas dari <div> elemen:

document.getElementById("myDIV").classList.remove("mystyle");

Cobalah sendiri "

Contoh

Hapus beberapa kelas dari <div> elemen:

document.getElementById("myDIV").classList.remove("mystyle", "anotherClass", "thirdClass");

Cobalah sendiri "

Contoh

Beralih antara dua kelas untuk <div> elemen:

document.getElementById("myDIV").classList.toggle("newClassName");

Cobalah sendiri "

Contoh

Dapatkan kelas name(s) dari <div> elemen:

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

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

Hasil x akan:

mystyle anotherClass thirdClass

Cobalah sendiri "

Contoh

Cari tahu berapa banyak nama kelas <div> elemen memiliki:

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

Hasil x akan:

Cobalah sendiri "

Contoh

Dapatkan pertama nama kelas (index 0) dari <div> elemen:

var x = document.getElementById("myDIV").classList.item(0);

Hasil x akan:

mystyle

Cobalah sendiri "

Contoh

Cari tahu apakah elemen memiliki "mystyle" kelas:

var x = document.getElementById("myDIV").classList.contains("mystyle");

Hasil x akan:

true

Cobalah sendiri "

Contoh

Cari tahu apakah elemen memiliki "mystyle" kelas. Jika demikian, menghapus nama kelas lain:

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

if (x.classList.contains("mystyle")) {
x.classList.remove("anotherClass");
} else {
alert("Could not find it.");
}

Cobalah sendiri "

Contoh

Beralih antara kelas untuk membuat tombol dropdown:

// Get the button, and when the user clicks on it, execute myFunction
document.getElementById("myBtn").onclick = function() {myFunction()};

/* myFunction toggles between adding and removing the show class, which is used to hide and show the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
}
}

Cobalah sendiri "

Contoh mundur: tambahkan

Sebuah solusi lintas-browser saat menggunakan classList. add() metode, untuk IE9 dan sebelumnya:

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

if (x.classList) {
x.classList.add("mystyle");
} else {
x.className = "mystyle"; // For IE9 and earlier
}

Cobalah sendiri "

Contoh mundur: hapus

Sebuah solusi lintas-browser saat menggunakan classList. remove() metode, untuk IE9 dan sebelumnya:

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

if (x.classList) {
x.classList.remove("mystyle");
} else {
x.className = x.className.replace(/\bmystyle/g, ""); // For IE9 and earlier
}

Cobalah sendiri "

Fallback Contoh: mengandung

Sebuah solusi lintas-browser saat menggunakan classList. contains() metode, untuk IE9 dan sebelumnya:

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

if (x.classList) {
alert(x.classList.contains("mystyle"));
} else {
alert(/\bmystyle/g.test(x.className)); // For IE9 and earlier
}

Cobalah sendiri "

Fallback Contoh: beralih

Sebuah solusi lintas-browser saat menggunakan classList. toggle() metode, untuk IE9:

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

if (x.classList) {
    x.classList.toggle("mystyle");
} else {
    // For IE9
    var classes = x.className.split(" ");
    var i = classes.indexOf("mystyle");

    if (i >= 0)
        classes.splice(i, 1);
    else
        classes.push("mystyle");
        x.className = classes.join(" ");
}

Cobalah sendiri "