Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk mengalih keluar Kelas CSS dengan JavaScript Tanpa jQuery?

Bagaimana untuk mengalih keluar Kelas CSS dengan JavaScript Tanpa jQuery?

Mary-Kate Olsen
Mary-Kate Olsenasal
2024-11-11 17:33:03618semak imbas

How to Remove CSS Classes with JavaScript Without jQuery?

Mengalih keluar Kelas CSS dengan JavaScript Tanpa jQuery

Mengalih keluar kelas CSS daripada elemen menggunakan JavaScript ialah tugas biasa dalam pembangunan web. Untuk mencapai ini tanpa jQuery, terdapat beberapa pendekatan, dengan yang paling mudah ialah penggunaan harta classList.

Menggunakan classList

Sifat classList menyediakan antara muka yang mudah untuk memanipulasi kelas pada elemen. Untuk mengalih keluar kelas tertentu, hanya gunakan kaedah remove():

ELEMENT.classList.remove("CLASS_NAME");

Contoh

Pertimbangkan HTML dan CSS berikut:

<div>
.red {
  background: red;
}

Untuk mengalih keluar kelas "merah" daripada elemen "el" menggunakan classList, kod berikut boleh digunakan:

var el = document.getElementById("el");
el.classList.remove("red");

Pendekatan Alternatif

Walaupun classList ialah pendekatan yang paling disyorkan, terdapat cara alternatif untuk mengalih keluar kelas, seperti:

  • Manipulasi Atribut: Menetapkan atribut className kepada senarai kelas baharu tanpa sasaran class.
  • Penggantian Ungkapan Biasa: Menggunakan replace() untuk mengalih keluar kelas sasaran daripada rentetan className.

Walau bagaimanapun, kaedah ini kurang cekap dan fleksibel berbanding menggunakan classList.

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

Kenyataan:
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