Rumah >hujung hadapan web >tutorial js >Bagaimanakah Saya Boleh Mengurus Kelas Elemen Secara Dinamik dalam 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
Untuk menggantikan semua kelas sedia ada dengan yang baharu, gunakan className:
document.getElementById("MyElement").className = "MyClass";
Tambahkan ruang dan nama kelas baharu:
document.getElementById("MyElement").className += " MyClass";
Gunakan penggantian ungkapan biasa:
document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace(/(?:^|\s)MyClass(?!\S)/g , '');
if ( document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)/) )
Pengendalian Acara
Anda boleh menetapkan ini tindakan untuk onclick atau acara lain dengan:
<button onClick="changeClass()"></button>
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!