Di masa lalu, kami perlu menggunakan beberapa metode JS atau JQuery, HasClass, AddClass, dan Removeclass. sulit.
Daftar kelas baru H5 memungkinkan kami untuk mengoperasikan nama kategori elemen kami yang lebih nyaman.
MelihatKompatibilitas daftar kelas agak buruk, tidak kompatibel dengan IE browser di bawah IE10.
Contoh teladan
<! Ukuran font: 25px;} </tyle> </head> <body> <p> Klik tombol untuk menambahkan kelas mystyle ke elemen Div. </p> <tombol OnClick = myfunction ()> klik saya </button> <div id = myDiv> saya adalah elemen div. </div> <script> function myfunction () {document.geteLementById (myDiv) .classList.Add (mystyle);} </script> </body> </html> Kategori baruMenggunakan metode Tambah, Anda dapat menambahkan satu atau lebih kategori ke elemen halaman:
document.geteLementById (myDiv) .classlasist.add (mystyle);Hapus kelas
Dengan metode hapus, Anda dapat menghapus satu kelas CSS:
document.geteLementById (myDiv) .classlist.remove (mystyle);Beralih Nama Kategori Dalam Elemen
Beralih nama kategori dalam elemen. Gunakan metode sakelar, tata bahasa: sakelar (kelas, true | false)
Parameter pertama adalah nama kelas yang akan dihapus dalam elemen dan mengembalikan false.
Jika nama tidak ada, nama kelas akan ditambahkan ke elemen dan mengembalikan true.
Yang kedua adalah parameter opsional. Misalnya:
Hapus satu
document.geteLementById (myDiv) .classlist.toggle (classtoremove, false);
Tambahkan satu
document.geteLementById (myDiv) .classlist.toggle (classtoadd, true);
Catatan: Internet Explorer atau Opera 12 dan versi sebelumnya tidak mendukung parameter kedua
Periksa apakah itu berisi kelas tertentuGunakan metode contains untuk menentukan apakah ada kelas dan kembali ke nilai boolean.
// return true atau false document.getElementById (myDiv) .classlist.contains (myDiv);
Di atas adalah semua isi artikel ini.