Bolehkah JavaScript Memanipulasi Secara Terus Gaya Kelas Pseudo CSS Seperti :hover?

Memanipulasi Gaya Kelas Pseudo CSS dengan JavaScript

Bolehkah kita mengubah suai peraturan kelas pseudo CSS secara dinamik, seperti :hover, daripada JavaScript? Jika ya, bagaimana? Soalan ini telah membingungkan pembangun web, dengan sesetengah orang menganggap fungsi sedemikian adalah mustahil. Mari kita selidiki kemungkinan dan batasan interaksi JavaScript dengan pemilih kelas pseudo.

Sasaran Langsung Tidak Disokong

Malangnya, penyemak imbas tidak menyediakan cara yang mudah untuk menyasarkan elemen tertentu dengan gaya pseudo-class. Ini bermakna anda tidak boleh terus menetapkan a:hover { color: red } dalam kod JavaScript.

Mengubah suai Lembaran Gaya

Pendekatan alternatif terletak pada mengubah lembaran gaya itu sendiri. Dengan menambahkan peraturan seperti #elid:hover { background: red } pada lembaran gaya, anda boleh menggayakan elemen berdasarkan ID uniknya.

Sintaks untuk Penyemak Imbas Berbeza

Bergantung pada penyemak imbas, sintaks untuk memanipulasi lembaran gaya berbeza-beza:

• Pelayar Standard:

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

  Salin selepas log masuk

• Internet Explorer:

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

  Salin selepas log masuk

Keanehan dan Pengehadan

Manipulasi lembaran gaya dinamik menggunakan JavaScript boleh menjadi rumit dan secara amnya tidak disyorkan kerana potensi isu keserasian merentas penyemak imbas dan ketersediaan alternatif yang lebih stabil.

Atas ialah kandungan terperinci Bolehkah JavaScript Memanipulasi Secara Terus Gaya Kelas Pseudo CSS Seperti :hover?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!