## 如何使用 JavaScript 修改 CSS 規則而不使用內聯樣式？-css教學-PHP中文網

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

Linda Hamilton

發布： 2024-10-25 02:22:29

原創

667 人瀏覽過

## How to Modify CSS Rules with JavaScript Without Inline Styling?

使用 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中文網其他相關文章！