Rumah > hujung hadapan web > tutorial css > Bagaimana untuk mengalih keluar Kelas CSS Menggunakan JavaScript Vanila?

Bagaimana untuk mengalih keluar Kelas CSS Menggunakan JavaScript Vanila?

Patricia Arquette
Lepaskan: 2024-12-20 16:08:10
asal
1022 orang telah melayarinya

How to Remove a CSS Class Using Vanilla JavaScript?

Alih Keluar Kelas CSS: Panduan JavaScript Komprehensif

Mengalih keluar kelas CSS daripada elemen menggunakan JavaScript vanila ialah tugas biasa yang dihadapi oleh pembangun web . Tidak seperti jQuery, yang menyediakan API yang dipermudahkan, JavaScript menawarkan pendekatan serba boleh dan tahap rendah untuk operasi ini.

Untuk mengalih keluar kelas CSS dengan berkesan, teknik pilihan dan standard adalah memanfaatkan sifat classList. Disokong merentas penyemak imbas moden, ia mendayakan manipulasi kelas yang tepat.

PENYELESAIAN

Coretan berikut menunjukkan sintaks yang betul:

ELEMENT.classList.remove("CLASS_NAME");
Salin selepas log masuk

Coretan kod ini mengalih keluar kelas yang ditentukan (CLASS_NAME) daripada elemen sasaran (ELEMEN).

CONTOH

Pertimbangkan contoh berikut, di mana kita mempunyai butang yang menogol pengalihan keluar kelas "merah" daripada div:

remove.onclick = () => {
  const el = document.querySelector('#el');
  el.classList.remove("red");
};
Salin selepas log masuk
.red {
  background: red
}
Salin selepas log masuk
<div>
Salin selepas log masuk

Setelah mengklik butang "Alih Keluar Kelas", latar belakang "merah" akan dialih keluar daripada div.

Memahami cara mengalih keluar kelas CSS dengan JavaScript adalah penting untuk mengekalkan halaman web dinamik dengan kawalan tepat ke atas gaya elemen.

Atas ialah kandungan terperinci Bagaimana untuk mengalih keluar Kelas CSS Menggunakan JavaScript Vanila?. 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