## 如何動態修改 CSS 樣式而不覆寫現有規則？

使用 JavaScript 修改 CSS 規則物件

在 Web 開發領域，經常需要動態修改 CSS 樣式。雖然內聯樣式提供了一種簡單的解決方案，但它具有覆蓋現有樣式並可能損害所需行為的缺點。本文探討了一種更複雜的方法：直接存取和修改 CSS 規則物件。

使用 CSS 規則物件

透過程式碼修改 CSS 樣式的關鍵在於 CSS 規則物件。該物件表示單一 CSS 規則並公開其屬性，例如其選擇器和聲明值。要存取該對象，我們可以利用 DOM 樣式表物件的 cssRules 屬性。以下是一個範例：

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

在上面的範例中，sheet 指的是文件中遇到的第一個外部樣式表，rules 是它包含的 CSS 規則物件的陣列。每個規則物件都可以透過特定的索引來存取。這允許我們定位特定規則並修改其屬性。

修改規則屬性

要修改規則的屬性，我們可以透過規則物件的 style 屬性來存取它們。例如，如果我們想要更改elementA 的顏色，我們可以執行以下操作：

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

這將為規則數組中的第一個規則設定顏色屬性，在本例中可能是負責樣式化elementA的規則。

示範

為了進一步說明這個概念，讓我們考慮以下CSS 規則：

<code class="css">.box {
  color: green;
}

.box:hover {
  color: blue;
}</code>

預設情況下，此規則將導致框元素懸停時變為藍色。但是，如果我們套用內聯樣式將顏色設為紅色，則懸停效果將會遺失。

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

要在修改基色時保留懸停效果，我們可以使用cssRules 屬性，如下所示：

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

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

這會將.box 的基色更改為紅色，但仍然允許藍色懸停效果正常運作。

結論

利用 CSS 規則物件及其屬性，我們可以動態修改 CSS 樣式，而不受內聯樣式的限制。這種方法可以更好地控制樣式管理，並實現更複雜和更靈敏的網頁設計。

以上是## 如何動態修改 CSS 樣式而不覆寫現有規則？的詳細內容。更多資訊請關注PHP中文網其他相關文章！