我們可以在 JavaScript 中存取自訂或無效 CSS 屬性的值嗎？

從 JavaScript 存取無效/自訂 CSS 屬性的值

在 Web 開發領域，CSS 屬性對於樣式元素至關重要。雖然定義了許多標準 CSS 屬性，但您可能會遇到想要使用自己的自訂屬性的情況。這就提出了一個問題：我們可以在 JavaScript 中存取這些無效或自訂 CSS 屬性的值嗎？

要探索這一點，請考慮以下CSS：

<code class="css">div {
    -my-foo: 42;
}</code>

假設您有這樣的樣式聲明，您可以使用JavaScript 檢索給定div 元素的-my-foo 屬性的值嗎？

常規方法

不幸的是，直接存取 invalid 的值CSS 屬性無法透過傳統方式實現。瀏覽器往往會忽略無法識別的或自訂的屬性，因此您不會發現它們列在 CSSStyleDeclaration 物件中。例如，在給定的 CSS 範例中， style:CSSStyleDeclaration 物件將只包含 width 屬性。

可能的替代方案

雖然傳統方法可能不起作用，但有另一種方法。您可以手動解析原始 CSS 文字以擷取自訂屬性的值。例如，您可以使用以下程式碼：

<code class="javascript">document.getElementsByTagName("style")[0].innerText;</code>

此程式碼檢索整個原始 CSS 文本，並允許您搜尋您感興趣的自訂屬性值。請記住，此方法需要額外的

注意：

值得注意的是CSSStyleDeclaration 接口，由DOM-Level-2 樣式規範定義，意味著所有指定的屬性，包括無效的屬性，都應該可以透過介面存取。然而，大多數瀏覽器目前並不遵守這部分規範。

以上是我們可以在 JavaScript 中存取自訂或無效 CSS 屬性的值嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！