Bagaimana untuk Mengubah Suai Objek Pengisytiharan CSS dalam JavaScript tanpa Mengganti Gaya Sedia Ada?

Mengakses dan Mengubah Suai Objek Pengisytiharan CSS

Dalam pembangunan web, anda mungkin menghadapi keperluan untuk mengubah suai gaya CSS tanpa menggunakan penggayaan sebaris, yang boleh menimpa gaya sedia ada dan mengganggu kefungsian. Artikel ini akan menunjukkan cara untuk mengakses dan mengubah suai objek pengisytiharan CSS menggunakan JavaScript.

Pertimbangkan kod CSS berikut:

<code class="css">.box {
  color: green;
}

.box:hover {
  color: blue;
}</code>

CSS ini mencipta kotak dengan teks hijau yang bertukar menjadi biru apabila tuding. Walau bagaimanapun, jika anda menggunakan penggayaan sebaris untuk warna, gelagat tuding akan hilang:

<code class="html"><div class="box" style="color: red;">TEXT</div></code>

Untuk mengelakkan isu ini, anda boleh mengakses objek pengisytiharan CSS dan mengubah suainya secara langsung. JavaScript menyediakan sifat cssRules pada objek lembaran gaya DOM yang sepadan dengan lembaran gaya anda. Anda boleh menggunakan sifat ini untuk mendapatkan tatasusunan semua peraturan CSS.

Untuk mengubah suai peraturan CSS, anda boleh menggunakan sifat gaya objek peraturan. Contohnya, untuk menukar warna kotak kepada merah, anda boleh menggunakan JavaScript berikut:

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

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

Perhatikan bahawa IE menggunakan peraturan dan bukannya cssRules.

Anda boleh melihat demonstrasi teknik ini di http://jsfiddle.net/8Mnsf/1/.

Atas ialah kandungan terperinci Bagaimana untuk Mengubah Suai Objek Pengisytiharan CSS dalam JavaScript tanpa Mengganti Gaya Sedia Ada?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!