如何在 JavaScript 中修改 CSS 聲明物件而不覆寫現有樣式？

存取與修改CSS聲明物件

在Web開發中，您可能會遇到需要修改CSS樣式而不求助於內聯樣式的情況，這可以覆蓋現有樣式並破壞功能。本文將示範如何使用 JavaScript 存取和修改 CSS 聲明物件。

考慮以下 CSS 程式碼：

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

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

此 CSS 建立一個帶有綠色文字的框，懸停時會變成藍色。但是，如果您對顏色套用內聯樣式，則懸停行為將丟失：

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

要避免此問題，您可以訪問 CSS 聲明物件並直接修改它。 JavaScript 在與您的樣式表相對應的 DOM 樣式表物件上提供 cssRules 屬性。您可以使用此屬性來取得所有 CSS 規則的陣列。

要修改 CSS 規則，您可以使用規則物件的 style 屬性。例如，要將框的顏色變更為紅色，您可以使用以下 JavaScript：

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

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

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

您可以看到以下示範該技術位於http://jsfiddle.net/8Mnsf/1/。

以上是如何在 JavaScript 中修改 CSS 聲明物件而不覆寫現有樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！