Bolehkah JavaScript Mengubah Suai Secara Dinamik Set Peraturan CSS?

Memanipulasi Set Peraturan CSS dengan JavaScript

Soalan:

Bolehkah set peraturan CSS diubah suai secara dinamik menggunakan JavaScript, seperti menukar penggayaan berbilang elemen dengan kelas yang sama pada web halaman?

Jawapan:

Walaupun mungkin untuk membuat perubahan CSS sedemikian dengan JavaScript, proses itu melibatkan beberapa kerumitan. Panduan komprehensif untuk ini boleh didapati dalam artikel "Totally Pwn CSS with Javascript."

Untuk melaksanakan pengubahsuaian yang disebutkan di atas, ikut langkah berikut:

1. Akses set peraturan menggunakan Kaedah DOM.
2. Ubah suai sifat set peraturan seperti yang dikehendaki.
3. Gunakan semula yang dikemas kini ditetapkan peraturan kepada elemen.

Pelaksanaan:

Firefox dan IE: Kod di bawah telah diuji untuk berfungsi dalam ini penyemak imbas:

// Access the rule-set
var styleSheet = document.styleSheets[0]; // assuming there's only one
var ruleSet = styleSheet.cssRules[0]; // assuming there's only one

// Modify the rule-set
ruleSet.style.color = "red";

// Reapply the updated rule-set
stylesheet.insertRule(ruleSet.cssText, 0);

Chrome: Dengan kemas kini dalam Chrome, sokongan untuk kaedah DOM yang disebutkan di atas kini tersedia.

Atas ialah kandungan terperinci Bolehkah JavaScript Mengubah Suai Secara Dinamik Set Peraturan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!