Bagaimanakah saya boleh mengubah suai Nilai CSS yang Ditakrifkan dalam Lembaran Gaya Luaran Menggunakan JavaScript?

Pengubahsuaian Nilai CSS dengan JavaScript

JavaScript menawarkan cara mudah untuk menetapkan nilai CSS sebaris. Walau bagaimanapun, kaedah ini boleh menimbulkan cabaran apabila mengubah suai nilai CSS yang ditakrifkan dalam helaian gaya yang tidak sebaris.

Mengambil Nilai CSS daripada Lembaran Gaya

Untuk mendapatkan semula nilai CSS yang tidak sebaris, JavaScript membenarkan akses kepada lembaran gaya melalui document.styleSheets. Fungsi ini mengembalikan tatasusunan semua helaian gaya dalam dokumen. Untuk mencari lembaran gaya tertentu, gunakan sifat document.styleSheets[styleIndex].href.

Mengubah suai Peraturan CSS Lembaran Gaya

Setelah lembaran gaya yang dikehendaki dikenal pasti, langkah seterusnya adalah untuk mendapatkan pelbagai peraturan CSS. Tatasusunan ini diakses menggunakan sifat peraturan untuk Internet Explorer dan cssRules untuk kebanyakan pelayar lain. Setiap peraturan boleh dibezakan dengan sifat selectorTextnya.

Untuk mengubah suai nilai CSS, tetapkan sifat nilai peraturan tersebut. Kod yang dikemas kini akan kelihatan serupa dengan ini:

<code class="javascript">var cssRuleCode = document.all ? 'rules' : 'cssRules'; //account for IE and FF
var rule = document.styleSheets[styleIndex][cssRuleCode][ruleIndex];
var selector = rule.selectorText;  //maybe '#tId'
var value = rule.value;            //both selectorText and value are settable.</code>

Pendekatan ini membolehkan anda menukar nilai CSS secara global, mengemas kini semua elemen dengan gaya yang ditentukan dengan berkesan.

Atas ialah kandungan terperinci Bagaimanakah saya boleh mengubah suai Nilai CSS yang Ditakrifkan dalam Lembaran Gaya Luaran Menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!