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

使用JavaScript 修改CSS 值

在JavaScript 中使用內聯CSS 值時，很容易遇到需要更改CSS 值的情況外部CSS 樣式表中定義的樣式值。但是，僅修改內聯樣式可能會導致問題。

例如，如果您有一個寬度為 30% 的內聯樣式，且樣式表規則將寬度設為 50%，則修改內聯樣式將覆蓋樣式表值。另外，在設定 width 屬性之前取得它，由於缺少內聯樣式，會傳回“null”，這會導致在需要確定寬度以進行邏輯運算的場景中出現問題。

為了解決這個問題，我們需要一個存取和修改外部樣式表本身定義的 CSS 值的方法。幸運的是，JavaScript 提供了一個解決方案。

擷取樣式表規則

第一步是擷取樣式表物件。這可以使用“document.styleSheets”屬性來實現。它傳回文件中所有樣式表的陣列。

要辨識特定樣式表，請檢查「document.styleSheets[styleIndex].href」屬性。這使您可以找到要修改的樣式表。

存取規則物件

取得樣式表後，您需要存取規則物件。這些物件代表樣式表中的各個 CSS 規則。可用名稱取決於瀏覽器：Internet Explorer 中為“rules”，大多數其他瀏覽器中為“cssRules”。

例如，要使用特定選擇器來識別特定規則，您可以檢查「selectorText」屬性每個規則物件。

修改規則值

最後，您可以透過設定「value」屬性來修改這些規則的值。這允許您在樣式表層級更改樣式，從而影響與規則選擇器相符的所有元素。

原始回應中提供的程式碼片段示範如何使用 JavaScript 擷取和修改樣式表規則。透過遵循此方法，您可以有效地更新 CSS 值，而不受內聯樣式的限制，確保變更在文件中的多個元素中一致套用。

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