如何在 JavaScript 中檢索無效/自訂 CSS 屬性的值？

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

定義自訂或無效CSS 屬性（如「-my-foo ”）時，開發人員可能想知道是否可以從JavaScript 中檢索它們的值。

為了回答這個問題，我們假設我們有如下所示的CSS：

div {
    -my-foo: 42;
}

嘗試存取「-my」的值透過CSSStyleDeclaration 物件從JavaScript 發出「-foo」可能會導致困難。 Chrome 和 Firefox 中的測試表明，這些瀏覽器會跳過無效屬性，僅公開有效屬性。例如，對於像這樣的CSS：

div {
    width: 100px;
    -my-foo: 25px;
}

CSSStyleDeclaration 物件將只包含以下鍵：

0: width
cssText: "width: 100px"
length: 1

因此，使用JavaScript 從JavaScript 取得「-my-foo」的值這種方法是不可行的。

但是，DOM-Level-2 樣式規格指出「實作 [瀏覽器] 預計將透過 CSSStyleDeclaration 介面提供對所有指定屬性的存取...」。這表明瀏覽器理論上應該列出物件中的無效屬性，即使它們無法識別它們。

作為解決方法，可以解析原始 CSS 文字以檢索自訂屬性的值。然而，不建議這種方法，因為它需要大量的努力，並且可能並不總是可靠或高效。

以上是如何在 JavaScript 中檢索無效/自訂 CSS 屬性的值？的詳細內容。更多資訊請關注PHP中文網其他相關文章！