Rumah > hujung hadapan web > tutorial js > Bagaimana untuk mengalih keluar Kelas CSS dengan JavaScript?

Bagaimana untuk mengalih keluar Kelas CSS dengan JavaScript?

Susan Sarandon
Lepaskan: 2024-11-08 20:10:17
asal
597 orang telah melayarinya

How to Remove CSS Classes with JavaScript?

Mengalih keluar Kelas CSS dengan JavaScript

Untuk mengalih keluar kelas CSS daripada elemen menggunakan JavaScript, terdapat berbilang pendekatan. Mari teroka kaedah yang disyorkan menggunakan classList.

classList ialah harta yang disokong secara meluas dalam penyemak imbas moden. Untuk menggunakannya, ikuti langkah berikut:

  1. Dapatkan semula elemen: Gunakan document.querySelector() untuk memilih elemen yang ingin anda ubah suai.
  2. Akses sifat classList: Setelah anda mempunyai elemen, gunakan sifat classList untuk memanipulasi kelas.
  3. Alih keluar kelas: Panggil kaedah remove() pada classList dan nyatakan nama kelas yang anda mahu alih keluar dalam tanda petikan.

Contohnya:

const el = document.querySelector('#el');
el.classList.remove("red");
Salin selepas log masuk

Kod ini akan mengalih keluar kelas "merah" daripada elemen dengan ID "el ".

Nota Tambahan:

  • Jika anda perlu mengalih keluar berbilang kelas, anda boleh menggunakan kaedah remove() beberapa kali.
  • classList juga menyokong kaedah add(), toggle(), dan contains() untuk mengurus kelas.
  • Untuk penyemak imbas yang tidak menyokong classList, anda boleh menggunakan element.className untuk mengalih keluar kelas, tetapi ia dianggap usang.

Atas ialah kandungan terperinci Bagaimana untuk mengalih keluar Kelas CSS dengan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan