Bagaimana untuk Mengubah Suai Perisytiharan CSS Secara Dinamik dengan JavaScript?

Akses dan Ubah Suai Pengisytiharan CSS dengan JavaScript

Untuk mengubah suai pengisytiharan CSS secara dinamik, tanpa menggunakan penggayaan sebaris, akses objek set peraturan CSS daripada helaian gaya DOM.

Cara Mengubah Suai Pengisytiharan CSS

1. Dapatkan objek lembaran gaya:

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

   Salin selepas log masuk

2. Dapatkan semula peraturan CSS:

   <code class="javascript">var rules = sheet.cssRules || sheet.rules;</code>

   Salin selepas log masuk

3. Pilih peraturan yang diingini menggunakan indeksnya:

   <code class="javascript">var rule = rules[0];</code>

   Salin selepas log masuk

4. Ubah suai peraturan gaya:

   <code class="javascript">rule.style.color = 'red';</code>

   Salin selepas log masuk

Contoh

Pertimbangkan contoh berikut:

<code class="html"><style>
    .box {color: green;}
    .box:hover {color: blue;}
</style>

<div class="box">TEXT</div></code>

Untuk menukar warna teks .kotak kepada merah, tanpa menjejaskan gelagat tuding:

<code class="javascript">var sheet = document.styleSheets[0];
var rules = sheet.cssRules || sheet.rules;
rules[0].style.color = 'red';</code>

Nota untuk Internet Explorer

Internet Explorer menggunakan peraturan dan bukannya cssRules untuk mengakses peraturan CSS.

Demonstrasi

Demonstrasi langsung mengakses dan mengubah suai perisytiharan CSS dengan JavaScript boleh didapati di: http://jsfiddle.net/8Mnsf/1/

Atas ialah kandungan terperinci Bagaimana untuk Mengubah Suai Perisytiharan CSS Secara Dinamik dengan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!