Properti HTML DOM classList
contoh
Untuk <div> elemen untuk menambahkan kelas:
Coba »
Definisi dan Penggunaan
properti classList mengembalikan nama kelas dari elemen, seperti DOMTokenList objek.
Properti ini digunakan dalam elemen untuk menambah, menghapus, dan beralih kelas CSS.
Properti classList adalah read-only, tetapi Anda dapat menggunakan add () dan menghapus () metode untuk memodifikasinya.
Dukungan Browser
Angka dalam tabel tersebut merupakan browser pertama yang mendukung nomor versi properti.
| milik | |||||
|---|---|---|---|---|---|
| classList | 8,0 | 10,0 | 3.6 | 5.1 | 11.5 |
tatabahasa
properti
| milik | deskripsi |
|---|---|
| panjangnya | Mengembalikan jumlah kelas daftar kelas Properti ini read-only |
cara
| cara | deskripsi |
|---|---|
| tambahkan (class1, class2, ...) | Tambahkan satu atau lebih nama kelas dalam elemen. Jika nama kelas yang ditentukan sudah ada, itu tidak akan menambah / td> |
| mengandung (kelas) | Mengembalikan nilai Boolean, itu ditentukan apakah kehadiran nama kelas yang ditentukan. Kemungkinan nilai:
|
| item (indeks) | Mengembalikan nama kelas dalam nilai indeks elemen. nilai indeks mulai dari nol. Jika nilai indeks dari berbagai rentang atau null |
| menghapus (class1, class2, ...) | Hapus satu atau lebih elemen dari nama kelas. Catatan: Menghapus nama kelas tidak ada, tidak mengeluh. |
| beralih (kelas, benar | false) | Beralih nama kelas dalam elemen. Parameter pertama adalah nama dari kelas Anda ingin menghapus elemen dan mengembalikan false. Jika nama kelas tidak ada, itu akan menambahkan nama kelas dalam elemen, dan mengembalikan nilai true. Yang kedua adalah parameter opsional adalah nilai Boolean yang digunakan untuk mengatur apakah elemen adalah wajib untuk menambah atau menghapus kategori, terlepas dari nama kelas ada. Sebagai contoh: Hapus kelas: elemen .classList.toggle ( "classToRemove" , false); Menambahkan kelas: elemen .classList.toggle ( "classToAdd" , true); Catatan: Internet Explorer atau Opera 12 dan versi sebelumnya tidak mendukung parameter kedua. |
teknis Deskripsi
| Pengembalian: | Sebuah DOMTokenList, kelas daftar nama mengandung unsur |
|---|
contoh yang lebih
contoh
Untuk <div> elemen untuk menambahkan lebih banyak kategori:
Coba »
contoh
Hapus kelas untuk elemen <div>:
Coba »
contoh
Untuk elemen <div> untuk menghapus beberapa kelas:
Coba »
contoh
Untuk elemen <div> untuk beralih kategori:
Coba »
contoh
Dapatkan nama kelas <div> elemen:
var x = document.getElementById ( "myDiv" ) .classList;
x Outputnya adalah:
Coba »
contoh
Lihat <div> elemen memiliki sejumlah nama kelas:
x Outputnya adalah:
Coba »
contoh
Dapatkan <div> elemen dalam nama kelas (indeks 0):
x Outputnya adalah:
Coba »
contoh
Lihat elemen ada "MyStyle" Kategori:
x Outputnya adalah:
Coba »
contoh
Lihat elemen ada "MyStyle" kategori, jika hapus hadir nama kelas lain:
jika (x.classList.contains ( "MyStyle") ) {
x.classList.remove ( "anotherClass");
} Lain {
alert ( "Tidak bisa menemukannya. ");
}
Coba »
Artikel terkait
CSS tutorial: CSS
CSS Referensi: CSS .class
Pedoman HTML DOM Referensi: atribut HTML DOM className
Pedoman HTML DOM Referensi: HTML DOM getElementsByClassName () metode
Pedoman HTML DOM Referensi: HTML DOM Style Object