Bagaimanakah Saya Boleh Memanipulasi Kelas Elemen JavaScript dengan Cekap?

Teknik Manipulasi Kelas JavaScript

Menukar Kelas Elemen Atas Permintaan

Untuk mengubah suai kelas elemen secara dinamik berdasarkan peristiwa seperti klik, JavaScript menawarkan beberapa pendekatan :

Kelas HTML5 Moden Manipulasi

Pelayar moden menyokong classList, yang memudahkan pengendalian kelas:

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');

Penyelesaian Silang Penyemak Imbas

Untuk penyemak imbas yang kekurangan classList, gunakan kaedah ini:

Ganti Semua Kelas

Tetapkan atribut className untuk menggantikan semua kelas sedia ada:

document.getElementById("MyElement").className = "MyClass";

Tambah Kelas

Tambahkan ruang dan nama kelas baharu pada nama kelas sedia ada:

document.getElementById("MyElement").className += " MyClass";

Alih Keluar Kelas

Gunakan regex untuk mengalih keluar kelas tertentu tanpa menjejaskan orang lain:

document.getElementById("MyElement").className =
document.getElementById("MyElement").className.replace(/(?:^|\s)MyClass(?!\S)/g, '');

Semak sama ada a Class Exists

Gunakan regex yang sama untuk mengalih keluar kelas untuk menyemak kehadiran kelas:

if (document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)/))

Melampirkan Fungsi pada onClick Events

Balut tindakan ini dalam fungsi dan panggil mereka daripada pengendali acara:

function changeClass() {
  // Code examples from above
}
document.getElementById("MyElement").addEventListener('click', changeClass);

Rangka Kerja JavaScript dan Perpustakaan

Kerangka seperti jQuery memperkemas manipulasi kelas:

$('#MyElement').addClass('MyClass');
$('#MyElement').removeClass('MyClass');
if ($('#MyElement').hasClass('MyClass'))
$('#MyElement').click(changeClass);

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memanipulasi Kelas Elemen JavaScript dengan Cekap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!