Bagaimanakah Saya Boleh Mengakses dan Mengubah Nilai CSS Bukan Sebaris Secara Pengaturcaraan Menggunakan JavaScript?

Menukar Nilai CSS dengan Javascript

Mengakses Nilai CSS Bukan Sebaris

Dalam JavaScript, nilai CSS sebaris boleh diubah suai dengan mudah menggunakan document.getElementById('id').style.width = nilai. Walau bagaimanapun, kaedah ini bermasalah apabila berurusan dengan nilai CSS bukan sebaris yang ditakrifkan dalam helaian gaya. Mendapatkan semula nilai tersebut menggunakan JavaScript mengembalikan Null, menjadikannya sukar untuk melaksanakan operasi logik tertentu.

Programmatically Modifying Style Properties

Untuk menangani isu ini, CSS stylesheet boleh diakses dan diubah suai secara pemrograman. Begini caranya:

1. Dapatkan tatasusunan lembaran gaya menggunakan document.styleSheets.
2. Cari lembaran gaya tertentu dengan membandingkan sifat document.styleSheets[styleIndex].href dengan laluan yang dijangkakan.
3. Dapatkan tatasusunan peraturan CSS menggunakan document.styleSheets[styleIndex].rules dalam IE atau document.styleSheets[styleIndex].cssRules dalam penyemak imbas lain.
4. Kenal pasti peraturan yang diingini dengan membandingkan sifat selectorTextnya dengan pemilih yang diketahui (cth., #tId).

Setelah peraturan dikenal pasti, sifat nilainya boleh dibaca dan ditetapkan. Ini membolehkan kedua-dua pengambilan semula dan pengubahsuaian nilai CSS tanpa mengubah gaya sebaris. Kod berikut menunjukkan proses ini:

var styleIndex = 0; // Index of the stylesheet to modify
var ruleIndex = 1; // Index of the rule to modify
var cssRuleCode = document.all ? 'rules' : 'cssRules'; // Account for IE and FF
var rule = document.styleSheets[styleIndex][cssRuleCode][ruleIndex];
var selector = rule.selectorText; // e.g., '#tId'
var value = rule.value; // Get the current value or set a new value using `rule.value = 'new_value'`

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengakses dan Mengubah Nilai CSS Bukan Sebaris Secara Pengaturcaraan Menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!