Bagaimanakah Saya Boleh Mengubah Peraturan Kelas Pseudo CSS Secara Dinamik daripada JavaScript?

Mengubah Peraturan Kelas Pseudo CSS daripada JavaScript

Apabila ingin mengubah suai pemilih kelas pseudo CSS secara dinamik daripada JavaScript, seseorang mungkin menemui kesedaran bahawa manipulasi langsung peraturan ini tidak dapat dilaksanakan. Kelas pseudo, seperti :link dan :hover, beroperasi pada skop global, mempengaruhi semua elemen dalam dokumen yang sepadan dengan kriteria masing-masing.

Satu penyelesaian yang berpotensi melibatkan pengubahsuaian lembaran gaya itu sendiri. Dengan menambahkan peraturan yang menyasarkan elemen tertentu dengan ID unik, anda boleh menggunakan gaya kelas pseudo:

#elid:hover { background: red; }

Dengan mengandaikan setiap elemen mempunyai ID unik, teknik ini membolehkan penggayaan disasarkan.

Sebagai alternatif, spesifikasi DOM-Level-2-Style menyediakan lebih standard pendekatan:

document.styleSheets[0].insertRule('#elid:hover { background-color: red; }', 0);

IE, walau bagaimanapun, memerlukan sintaksnya sendiri:

document.styleSheets[0].addRule('#elid:hover', 'background-color: red', 0);

Walaupun kaedah ini menawarkan fleksibiliti yang lebih besar, ia mempunyai kelemahan. Manipulasi lembaran gaya dinamik boleh menjadi rumit dan terdedah kepada ralat. Selain itu, penyemak imbas yang lebih lama dan kurang biasa mungkin tidak menyokong fungsi ini. Oleh itu, adalah penting untuk menimbang keperluan dan kebolehlaksanaan pendekatan sedemikian sebelum melaksanakannya dalam kod pengeluaran.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengubah Peraturan Kelas Pseudo CSS Secara Dinamik daripada JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!