如何使用 JavaScript 修改 CSS 樣式表值？

使用 JavaScript 存取和修改 CSS 樣式

使用 JavaScript 修改 CSS 樣式時，定位正確的元素和值至關重要。內聯 CSS 值可以輕鬆更改，但取得和修改樣式表中定義的值可能具有挑戰性。

存取CSS 樣式表值

要存取給定的CSS 樣式表值id，請按照以下步驟操作：

1. 使用document .styleSheets 擷取所有樣式表。
2. 根據其 href 屬性來決定所需的樣式表。
3. 取得規則陣列（例如，大多數瀏覽器中的 cssRules、IE 中的規則）。
4. 使用其選擇器文字屬性來識別特定規則。

修改CSS 樣式表值

一旦確定了所需的規則，您就可以修改它：

1. 設定selectorText屬性以變更選擇器（例如，從#tId到#newId）。
2. 設定value 屬性以變更 CSS 值（例如，從 width: 50% 變更為 width: 30%）。

範例

在提供的場景中：

<style>
   #tId {
      width: 50%;
   }
</style>

<div id="tId"></div>

您可以使用下列JavaScript 來修改樣式表中的寬度屬性：

var rule = document.styleSheets[0].cssRules[0];
rule.selectorText = "#tId";
rule.value = "width: 30%";

這會將樣式表規則更新為：

#tId {
      width: 30%;
   }

請注意，內聯樣式仍優先於樣式表值。若要覆寫內聯樣式，請使用 document.getElementById('id').style.width = value.

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