Bagaimanakah anda boleh mengakses dan mengubah suai pengisytiharan CSS secara langsung menggunakan JavaScript?

Mengakses dan Mengubah Suai Pengisytiharan CSS dengan JavaScript

Penggayaan sebaris menawarkan pendekatan mudah untuk mengubah suai penampilan elemen, tetapi ia boleh mengatasi peraturan CSS sedia ada dan mengganggu tingkah laku yang dimaksudkan. Untuk mengelakkan ini, pembangun boleh memilih untuk mengubah suai objek pengisytiharan CSS secara langsung.

Objek pengisytiharan CSS boleh diakses melalui sifat StyleSheets objek dokumen. Setiap objek StyleSheet mengandungi koleksi cssRules (atau peraturan dalam Internet Explorer). Peraturan ini mewakili gaya yang ditakrifkan dalam lembaran gaya masing-masing.

Untuk mengubah suai objek pengisytiharan CSS, dapatkan semula peraturan yang sepadan daripada koleksi cssRules helaian gaya dan akses sifat gayanya. Contohnya:

<code class="javascript">var sheet = document.styleSheets[0];
var rules = sheet.cssRules || sheet.rules;

rules[0].style.color = 'red';</code>

Kod ini akan mengubah suai pengisytiharan warna untuk peraturan pertama dalam lembaran gaya kepada 'merah'.

Perhatikan bahawa mengubah suai sifat gaya peraturan akan mengatasi mana-mana yang sedia ada pengisytiharan dalam peraturan itu. Untuk mengubah suai sifat tertentu secara selektif, gunakan sintaks berikut:

<code class="javascript">var sheet = document.styleSheets[0];
var rules = sheet.cssRules || sheet.rules;

rules[0].style['background-color'] = 'blue';</code>

Kod ini hanya akan menukar sifat warna latar belakang peraturan pertama.

Menunjukkan teknik ini, JSFiddle berikut menunjukkan cara untuk mengubah suai warna elemen dengan kelas "kotak", tanpa menjejaskan kesan tuding: http://jsfiddle.net/8Mnsf/1/

Atas ialah kandungan terperinci Bagaimanakah anda boleh mengakses dan mengubah suai pengisytiharan CSS secara langsung menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!