Bagaimanakah saya boleh menukar nilai CSS secara dinamik yang ditakrifkan dalam lembaran gaya menggunakan Javascript?

Menukar Nilai CSS dengan Javascript: Memahami Manipulasi Stylesheet

Selalunya, kami mendapati keperluan untuk mengubah suai nilai CSS secara dinamik menggunakan Javascript. Walaupun menetapkan nilai CSS sebaris adalah mudah, ia boleh memberikan cabaran apabila CSS ditakrifkan dalam helaian gaya.

Contoh:

Pertimbangkan kod HTML berikut:

<code class="html"><div id="tId" style="width: 10px"></div></code>

Dan CSS yang sepadan:

<code class="css">#tId {
  width: 50%;
}</code>

Mengubah suai atribut gaya sebaris menggunakan Javascript akan mengatasi nilai lembaran gaya, seperti yang dilihat di bawah:

document.getElementById('tId').style.width = "30%";

Ini menghasilkan:

<code class="html"><div id="tId" style="width: 30%"></div></code>

Cabaran:

Masalah dengan pendekatan ini ialah:

• Ia hanya mempengaruhi nilai sebaris.
• Mengambil nilai lebar sebelum mengubah suainya mengembalikan Null apabila tiada gaya sebaris.

Penyelesaian: Memanipulasi Nilai Lembaran Gaya

Untuk menangani cabaran ini, kita perlu untuk memanipulasi nilai secara langsung dalam lembaran gaya. Begini cara ia boleh dicapai:

1. Dapatkan tatasusunan lembaran gaya menggunakan document.styleSheets.
2. Cari lembaran gaya khusus yang anda mahu ubah suai menggunakan document.styleSheets[styleIndex].href.
3. Dapatkan tatasusunan peraturan CSS menggunakan document.styleSheets[styleIndex].cssRules (untuk kebanyakan penyemak imbas) atau document.styleSheets[styleIndex].rules (untuk IE).
4. Kenal pasti peraturan CSS anda mahu ubah dengan menyemak sifat selectorText.

Kod berikut menunjukkan pendekatan ini:

var styleIndex = ...; // Index of the targeted stylesheet
var ruleIndex = ...; // Index of the targeted CSS rule
var cssRuleCode = document.all ? 'rules' : 'cssRules';
var rule = document.styleSheets[styleIndex][cssRuleCode][ruleIndex];
var value = rule.value; // Get the current value
rule.value = ...; // Modify the value

Dengan melaksanakan pendekatan ini, anda boleh memanipulasi nilai CSS dalam helaian gaya dengan berkesan, memastikan bahawa perubahan itu digunakan secara global pada semua elemen gaya yang ditentukan.

Atas ialah kandungan terperinci Bagaimanakah saya boleh menukar nilai CSS secara dinamik yang ditakrifkan dalam lembaran gaya menggunakan Javascript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!