Browser modern telah menambahkan classList yang menyediakan metode untuk mempermudah manipulasi kelas tanpa memerlukan pustaka
document.getElementById("MyElement").classList.add('MyClass'); document.getElementById("MyElement").classList.remove('MyClass'); if ( document.getElementById("MyElement").classList.contains('MyClass') ) document.getElementById("MyElement").classList.toggle('MyClass');Sayangnya, ini tidak berfungsi di Internet Explorer sebelum v10, meskipun ada celah untuk menambahkan dukungan untuk itu ke IE8 dan IE9, tersedia dari halaman ini. Namun, itu semakin banyak
Solusi lintas-browser sederhana
Cara JavaScript standar untuk memilih elemen adalah menggunakan document.getElementById("MyElement").className = "MyClass"; 2, yang digunakan oleh contoh berikut - Anda tentu saja dapat memperoleh elemen dengan cara lain, dan dalam situasi yang tepat mungkin cukup menggunakan document.getElementById("MyElement").className = "MyClass"; 3 sebagai gantinya - namun, menjelaskan secara mendetail tentang hal ini di luar jangkauan
Untuk mengubah semua kelas untuk suatu elemen
Untuk mengganti semua kelas yang ada dengan satu atau lebih kelas baru, atur atribut className
document.getElementById("MyElement").className = "MyClass"; _(Anda dapat menggunakan daftar yang dibatasi ruang untuk menerapkan banyak kelas. )
Untuk menambahkan kelas tambahan ke elemen
Untuk menambahkan kelas ke elemen, tanpa menghapus/mempengaruhi nilai yang ada, tambahkan spasi dan nama kelas baru, seperti itu
document.getElementById("MyElement").className += " MyClass"; _Untuk menghapus kelas dari elemen
Untuk menghapus satu kelas ke suatu elemen, tanpa memengaruhi kelas potensial lainnya, diperlukan penggantian regex sederhana
document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace ( /(?:^|\s)MyClass(?!\S)/g , '' ) /* Code wrapped for readability - above is all one statement */Penjelasan dari regex ini adalah sebagai berikut
(?:^|\s) # Match the start of the string or any single whitespace character MyClass # The literal text for the classname to remove (?!\S) # Negative lookahead to verify the above is the whole classname # Ensures there is no non-space character following # (i.e. must be the end of the string or space) _Bendera document.getElementById("MyElement").className = "MyClass"; 4 memberi tahu penggantian untuk mengulang sesuai kebutuhan, jika nama kelas telah ditambahkan beberapa kali
Untuk memeriksa apakah suatu kelas sudah diterapkan ke suatu elemen
Regex yang sama yang digunakan di atas untuk menghapus kelas juga dapat digunakan sebagai pemeriksaan apakah ada kelas tertentu
### Menetapkan tindakan ini ke acara onClick
Meskipun dimungkinkan untuk menulis JavaScript secara langsung di dalam atribut acara HTML (seperti document.getElementById("MyElement").className = "MyClass"; 5), perilaku ini tidak disarankan. Khususnya pada aplikasi yang lebih besar, kode yang lebih dapat dipelihara diperoleh dengan memisahkan markup HTML dari logika interaksi JavaScript
Langkah pertama untuk mencapainya adalah dengan membuat fungsi, dan memanggil fungsi tersebut dalam atribut onClick, misalnya
... My Button(Tidak diharuskan untuk memiliki kode ini dalam tag skrip, ini hanya untuk singkatnya contoh, dan menyertakan JavaScript dalam file yang berbeda mungkin lebih tepat. )
Langkah kedua adalah memindahkan event onClick dari HTML ke JavaScript, misalnya menggunakan addEventListener
... My Button(Perhatikan bahwa jendela. bagian onload diperlukan agar konten dari fungsi tersebut dijalankan setelah HTML selesai dimuat - tanpa ini, MyElement mungkin tidak ada saat kode JavaScript dipanggil, sehingga baris tersebut akan gagal. )
Framework dan Pustaka JavaScript
Kode di atas semuanya dalam JavaScript standar, namun, praktik umum untuk menggunakan kerangka kerja atau pustaka untuk menyederhanakan tugas umum, serta mendapat manfaat dari bug yang diperbaiki dan kasus tepi yang mungkin tidak terpikirkan saat menulis kode Anda
Meskipun beberapa orang menganggap penambahan ~50 KB kerangka kerja hanya untuk mengubah kelas adalah berlebihan, jika Anda melakukan pekerjaan JavaScript dalam jumlah besar atau apa pun yang mungkin memiliki perilaku lintas-browser yang tidak biasa, sebaiknya pertimbangkan
(Secara kasar, perpustakaan adalah seperangkat alat yang dirancang untuk tugas tertentu, sementara kerangka kerja umumnya berisi banyak perpustakaan dan melakukan serangkaian tugas lengkap. )
Contoh di atas telah direproduksi di bawah menggunakan jQuery, mungkin pustaka JavaScript yang paling umum digunakan (walaupun ada juga yang perlu diselidiki)
(Perhatikan bahwa document.getElementById("MyElement").className = "MyClass"; _6 di sini adalah objek jQuery. )
Mengubah Kelas dengan jQuery
$('#MyElement').addClass('MyClass'); $('#MyElement').removeClass('MyClass'); if ( $('#MyElement').hasClass('MyClass') )Selain itu, jQuery menyediakan pintasan untuk menambahkan kelas jika tidak berlaku, atau menghapus kelas yang berlaku