如何使用 JavaScript 修改外部樣式表中定義的 CSS 值？

使用 JavaScript 修改 CSS 值

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

從樣式表中擷取 CSS 值

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

修改樣式表 CSS 規則

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

要修改 CSS 值，請設定規則的 value 屬性。更新後的程式碼將類似於以下內容：

<code class="javascript">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.</code>

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

以上是如何使用 JavaScript 修改外部樣式表中定義的 CSS 值？的詳細內容。更多資訊請關注PHP中文網其他相關文章！