Atribut classList HTML DOM Element

Definisi dan penggunaan

classList Atribut mengembalikan nama kelas elemen.

classList Atribut mengembalikan DOMTokenList.

Contoh

Contoh 1

Tambahkan kelas "myStyle" ke elemen:

const list = element.classList;
list.add("myStyle");

Coba sendiri

Contoh 2

Hapus kelas "myStyle" dari elemen:

const list = element.classList;
list.remove("myStyle");

Coba sendiri

Contoh 3

Buka dan tutup "myStyle":

const list = element.classList;
list.toggle("myStyle");

Coba sendiri

Petunjuk:Beberapa contoh lainnya disediakan di bawah halaman.

Sintaks

element.classList

Nilai kembalian

Tipe Deskripsi
Objek DOMTokenList. Daftar nama kelas elemen.

Keterangan:Atribut classList adalah hanya-baca, tetapi Anda dapat menggunakan metode yang terdaftar di bawah ini untuk menambahkan, mengganti, atau menghapus kelas dari daftar:

classList atribut dan metode

Nama Deskripsi
add() Menambahkan satu atau lebih token ke dalam daftar.
contains() Mengembalikan true jika daftar mengandung kelas.
entries() Mengembalikan iterator dengan kunci/nilai dari daftar.
forEach() Eksekusi fungsi callback untuk setiap token dalam daftar.
item() Kembalikan token di indeks yang ditentukan.
keys() Kembalikan iterator yang mengandung kunci dalam daftar.
length Kembalikan jumlah token dalam daftar.
remove() Hapus satu atau beberapa token dari daftar.
replace() Ganti token dalam daftar.
supports() Kembalikan true jika token adalah salah satu token yang didukung properti.
toggle() Beralih antara token dalam daftar.
value Kembalikan daftar token dalam bentuk string.
values() Kembalikan iterator dengan nilai dalam daftar.

Beberapa contoh lain

Contoh 4

Tambah beberapa kelas ke elemen:

element.classList.add("myStyle", "anotherClass", "thirdClass");

Coba sendiri

Contoh 5

Hapus beberapa kelas dari elemen:

element.classList.remove("myStyle", "anotherClass", "thirdClass");

Coba sendiri

Contoh 6

Berapa banyak nama kelas elemen?

let numb = element.classList.length;

Coba sendiri

Contoh 7

Ambil nama kelas elemen "myDIV":

<div id="myDIV" class="myStyle anotherClass thirdClass">
<p>Saya adalah myDIV.</p>
</div>
const list = document.getElementById("myDIV").classList;

Coba sendiri

Contoh 8

Ambil kelas pertama elemen:

let className = element.classList.item(0);

Coba sendiri

Contoh 9

Apakah elemen memiliki kelas "myStyle"?

let x = element.classList.contains("myStyle");

Coba sendiri

Contoh 10

Jika elemen memiliki kelas "myStyle", hapus "anotherClass":

if (element.classList.contains("mystyle")) {
  element.classList.remove("anotherClass");
}

Coba sendiri

Contoh 11

Beralih antara kelas untuk membuat tombol turun:

document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

Coba sendiri

Contoh 12

Buat navigasi yang tetap:

// Dapatkan navigasi
const navbar = document.getElementById("navbar");
// Dapatkan posisi penyeretan navigasi
const sticky = navbar.offsetTop;
// Saat Anda mencapai posisi penyeretan, tambahkan kelas sticky ke navigasi
// Buangnya saat posisi penyeretan ditinggalkan
function myFunction() {
  if (window.pageYOffset  >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

Coba sendiri

Dukungan peramban

Semua peramban mendukung element.classList:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Dukungan 9-11 Dukungan Dukungan Dukungan Dukungan

Halaman yang berhubungan

Panduan syarat CSS:Syarat CSS

Panduan referensi CSS:Pemilih selector .class CSS

Objek DOMTokenList

Properti className

Metode getElementsByClassName()

Objek Style HTML DOM