Bagaimanakah Saya Boleh Mengurus Kelas Elemen Secara Dinamik dalam JavaScript?

Bagaimanakah Saya Boleh Mengubah Kelas Elemen secara Dinamik dengan JavaScript?

Teknik HTML5 Moden untuk Manipulasi Kelas

Sokongan penyemak imbas moden harta classList, yang menyediakan kaedah mudah untuk menambah, mengalih keluar atau menogol kelas tanpa memerlukan luaran perpustakaan:

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

Menukar Semua Kelas

Untuk menggantikan semua kelas sedia ada dengan yang baharu, gunakan className:

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

Menambah Kelas Tambahan

Tambahkan ruang dan nama kelas baharu:

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

Mengalih keluar Kelas

Gunakan penggantian ungkapan biasa:

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

Menyemak sama ada Kelas Digunakan

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

Pengendalian Acara

Anda boleh menetapkan ini tindakan untuk onclick atau acara lain dengan:

• Memanggil fungsi dalam atribut onClick:

<button onClick="changeClass()"></button>

• Menggunakan addEventListener dalam JavaScript:

document.getElementById("MyElement").addEventListener('click', changeClass);

Rangka Kerja JavaScript dan Perpustakaan

Kerangka dan perpustakaan memudahkan tugasan ini, seperti jQuery:

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

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengurus Kelas Elemen Secara Dinamik dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!