如何使用 JavaScript 動態修改 CSS 聲明？

使用JavaScript 存取和修改CSS 聲明

要動態修改CSS 聲明，而不訴諸內聯樣式，請存取CSS 規則集物件從DOM 樣式表。

如何修改CSS 聲明

1. 取得樣式表物件：

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

   登入後複製

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

登入後複製
使用索引選擇所需的規則：

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

   登入後複製
修改規則的樣式：

3. 修改規則的樣式：

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

   登入後複製

範例

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

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

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

Internet Explorer 注意

演示

以上是如何使用 JavaScript 動態修改 CSS 聲明？的詳細內容。更多資訊請關注PHP中文網其他相關文章！