如何使用 JavaScript 直接存取和修改 CSS 聲明？

使用JavaScript 存取和修改CSS 聲明

內聯樣式提供了一種修改元素外觀的簡單方法，但它可以覆蓋現有的CSS 規則並擾亂預期的行為。為了避免這種情況，開發人員可以選擇直接修改 CSS 聲明物件。

CSS 聲明物件可以透過文檔物件的 styleSheets 屬性存取。每個 styleSheet 物件都包含 cssRules（或 Internet Explorer 中的規則）的集合。這些規則表示各自樣式表中定義的樣式。

要修改 CSS 聲明對象，請從樣式表的 cssRules 集合中擷取對應的規則並存取其樣式屬性。例如：

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

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

此程式碼會將樣式表中第一條規則的顏色宣告修改為「紅色」。

請注意，修改規則的樣式屬性將覆寫任何現有規則該規則內的聲明。若要選擇性地修改特定屬性，請使用下列語法：

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

rules[0].style['background-color'] = 'blue';</code>

此程式碼只會變更第一條規則的背景顏色屬性。

示範此技術，以下 JSFiddle 展示如何修改「box」類元素的顏色，而不影響懸停效果：http://jsfiddle.net/8Mnsf/1/

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