如何使用 Javascript 動態變更樣式表中定義的 CSS 值？

使用 Javascript 更改 CSS 值：了解樣式表操作

通常，我們發現需要使用 Javascript 動態修改 CSS 值。雖然設定內聯 CSS 值很簡單，但在樣式表中定義 CSS 時可能會帶來挑戰。

範例：

考慮以下HTML 程式碼：

<code class="html"><div id="tId" style="width: 10px"></div></code>

以及對應的CSS：

<code class="css">#tId {
  width: 50%;
}</code>

使用Java🎜修改內聯樣式屬性將覆蓋樣式表值，如下所示：

document.getElementById('tId').style.width = "30%";

這會導致：

<code class="html"><div id="tId" style="width: 30%"></div></code>

挑戰：

挑戰：

• 這種方法的問題在於：

它只會影響內聯值。

當沒有內聯樣式時，在修改寬度值之前檢索它會傳回 Null。

解決方案：操作樣式表值

1. 要解決這些挑戰，我們需要直接在樣式表中操作值。實作方法如下：
3. 使用 document.styleSheets 取得樣式表數組。
4. 使用 document.styleSheets[styleIndex].href 尋找要修改的特定樣式表。

使用 document.styleSheets[styleIndex].cssRules（對於大多數瀏覽器）或 document.styleSheets[styleIndex].rules（對於 IE）取得 CSS 規則陣列。

識別 CSS 規則您想要透過檢查selectorText屬性來更改。

var styleIndex = ...; // Index of the targeted stylesheet
var ruleIndex = ...; // Index of the targeted CSS rule
var cssRuleCode = document.all ? 'rules' : 'cssRules';
var rule = document.styleSheets[styleIndex][cssRuleCode][ruleIndex];
var value = rule.value; // Get the current value
rule.value = ...; // Modify the value

以下程式碼示範了這種方法：透過實作此方法，您可以有效地操作樣式表中的CSS值，確保變更將全域應用於指定樣式的所有元素。

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