如何使用 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>

更改文字顏色.box 變成紅色，不影響懸停行為：

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

Internet Explorer 注意

Internet Explorer 使用規則而不是cssRules 來存取CSS 規則。

演示

使用 JavaScript 訪問和修改 CSS 聲明的現場演示可以在以下位置找到：http://jsfiddle.net/8Mnsf/1/

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