## 如何使用 JavaScript 修改 CSS 規則而不使用內聯樣式？

使用 JavaScript 修改 CSS 規則而不使用內聯樣式

有時需要動態修改 CSS 聲明而不訴諸內聯樣式。考慮以下範例：

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

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

這會產生一個藍色框，懸停時會變成綠色。但是，內聯樣式可以覆寫此行為：

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

在這種情況下，無論懸停狀態如何，該框將始終為紅色。

要避免此問題，您可以修改CSS直接聲明物件。具體方法如下：

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

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

請注意，Internet Explorer 使用規則而不是 cssRules。

這是一個示範：[Fiddle](http://jsfiddle.net/8Mnsf/1/)

以上是## 如何使用 JavaScript 修改 CSS 規則而不使用內聯樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！