使用 JavaScript 修改 CSS 值

JavaScript 提供了一種設定內聯 CSS 值的簡單方法。然而，當修改非內聯樣式表中定義的 CSS 值時，此方法可能會帶來挑戰。

從樣式表中擷取 CSS 值

要擷取非內聯樣式表中的 CSS 值非內聯，JavaScript 允許透過 document.styleSheets 存取樣式表。此函數傳回文件中所有樣式表的陣列。若要尋找特定樣式表，請使用 document.styleSheets[styleIndex].href 屬性。

修改樣式表 CSS 規則

識別所需樣式表後，下一步就是取得CSS規則陣列。對於 Internet Explorer，可以使用 Rules 屬性來存取該陣列；對於大多數其他瀏覽器，可以使用 cssRules 來存取該陣列。每個規則都可以透過其 selectorText 屬性來區分。

要修改 CSS 值，請設定規則的 value 屬性。更新後的程式碼看起來類似：

var cssRuleCode = document.all ? 'rules' : 'cssRules'; //account for IE and FF
var rule = document.styleSheets[styleIndex][cssRuleCode][ruleIndex];
var selector = rule.selectorText;  //maybe '#tId'
var value = rule.value;            //both selectorText and value are settable.

這種方法可讓您全域變更 CSS 值，有效地更新具有指定樣式的所有元素。