如何使用 JavaScript 以程式設計方式存取和更改非內聯 CSS 值？

使用Javascript 更改CSS 值

存取非內聯CSS 值

在非內聯CSS 值

以程式設計方式修改樣式屬性

要解決此問題，可以存取 CSS 樣式表並以程式方式修改。操作方法如下：

1. 使用 document.styleSheets 擷取樣式表數組。
2. 透過將 document.styleSheets[styleIndex].href 屬性與預期路徑進行比較來找到特定樣式表。
3. 在 IE 中使用 document.styleSheets[styleIndex].rules 取得 CSS 規則陣列或其他瀏覽器中的 document.styleSheets[styleIndex].cssRules。
4. 透過將其 selectorText 屬性與已知選擇器（例如 #tId）進行比較來識別所需的規則。

一旦規則被辨識後，可以讀取並設定其 value 屬性。這允許在不更改內聯樣式的情況下檢索和修改 CSS 值。下面的程式碼示範了這個過程：

var styleIndex = 0; // Index of the stylesheet to modify
var ruleIndex = 1; // Index of the rule to modify
var cssRuleCode = document.all ? 'rules' : 'cssRules'; // Account for IE and FF
var rule = document.styleSheets[styleIndex][cssRuleCode][ruleIndex];
var selector = rule.selectorText; // e.g., '#tId'
var value = rule.value; // Get the current value or set a new value using `rule.value = 'new_value'`

以上是如何使用 JavaScript 以程式設計方式存取和更改非內聯 CSS 值？的詳細內容。更多資訊請關注PHP中文網其他相關文章！