Bagaimanakah Saya Boleh Menambah atau Mengalih Keluar Kelas daripada Elemen HTML Menggunakan JavaScript?

Menambahkan Kelas pada Elemen dengan JavaScript

Apabila bekerja dengan elemen HTML, selalunya menjadi perlu untuk menambah atau mengalih keluar kelas secara dinamik menggunakan JavaScript . Sebagai contoh, katakan anda mempunyai elemen dengan HTML berikut:

<div class="someclass">
    <img  ... alt="Bagaimanakah Saya Boleh Menambah atau Mengalih Keluar Kelas daripada Elemen HTML Menggunakan JavaScript?" ><p>Dan anda ingin mencipta fungsi JavaScript yang akan menambah kelas lain pada elemen div di atas.</p>
<p><strong> Pelayar Moden</strong></p>
<p>Jika anda hanya menyasarkan penyemak imbas moden yang menyokong sifat Element.classList, penyelesaiannya adalah mudah. Hanya gunakan kaedah classList.add() untuk menambah kelas baharu pada elemen:</p>
<pre class="brush:php;toolbar:false">element.classList.add("my-class");

Untuk mengalih keluar kelas, gunakan kaedah classList.remove():

element.classList.remove("my-class");

Internet Explorer 9 dan Bawah

Untuk pelayar lama seperti Internet Explorer 9 atau lebih rendah, yang tidak menyokong harta classList, anda boleh menggunakan harta className. Mula-mula, tetapkan ID pada elemen, menjadikannya mudah untuk mendapatkan semula:

<div>
<p>Kemudian, gabungkan nama kelas baharu dengan yang sedia ada, memastikan ruang ditambah di antara mereka:</p>
<pre class="brush:php;toolbar:false">var d = document.getElementById("div1");
d.className += " otherclass";

Ingat untuk memasukkan ruang sebelum nama kelas baharu untuk mengelakkan konflik dengan kelas sedia ada dalam senarai kelas.

Dengan mengikuti ini pendekatan, anda boleh menambah atau mengalih keluar kelas secara dinamik daripada mana-mana elemen HTML menggunakan JavaScript, memberikan fleksibiliti dan kawalan ke atas penggayaan halaman web anda.