Bagaimanakah Saya Boleh Mengubah Peraturan CSS Secara Dinamik Menggunakan JavaScript?

Menukar Set Peraturan CSS daripada JavaScript

Memanipulasi set peraturan CSS secara dinamik boleh terbukti mencabar. Walau bagaimanapun, memahami cara untuk berbuat demikian adalah penting apabila ingin mengubah suai elemen halaman berdasarkan tindakan pengguna, seperti mengklik widget.

Untuk memulakan perubahan pada set peraturan CSS melalui JavaScript, ikut langkah berikut:

1. Cari Set Peraturan:

Kenal pasti set peraturan CSS khusus yang mengawal elemen yang anda ingin ubah suai.

2. Gunakan Document.styleSheets:

Akses sifat styleSheets objek dokumen:

var styleSheet = document.styleSheets[0]; // selects the first stylesheet

3. Akses Set Peraturan:

Nyatakan indeks set peraturan yang anda mahu ubah suai:

var rule = styleSheet.cssRules[index]; // where index represents the specific rule-set

4. Ubah suai Peraturan:

Kemas kini sifat peraturan menggunakan sifat gaya objek peraturan:

rule.style.setProperty('color', 'red');

Contoh:

Pertimbangkan set peraturan CSS berikut:

.element {
  color: blue;
}

Untuk menukar warna semua elemen dengan kelas .elemen kepada merah apabila widget diklik, anda boleh menggunakan JavaScript berikut:

document.querySelector('.widget').addEventListener('click', function() {
  var styleSheet = document.styleSheets[0];
  var rule = styleSheet.cssRules[0]; // assumes the CSS rule-set is the first one
  rule.style.setProperty('color', 'red');
});

Keserasian Pelayar:

Perhatikan bahawa pendekatan ini serasi dengan kebanyakan penyemak imbas moden, termasuk Firefox, Internet Explorer dan Chrome.

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