JavaScript 可以存取無效的自訂 CSS 屬性的值嗎？

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

在 CSS 中，可以使用 -- 前綴定義自訂屬性。但是，您可以從 JavaScript 存取無效或自訂 CSS 屬性的值嗎？

問題：

給定以下CSS：

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

您稍後可以在JavaScript 中確定特定div 元素的-my-foo屬性的值嗎？

答案：

在 CSSStyleDeclaration 中存取無效屬性名稱不會Chrome 和 Firefox 等流行瀏覽器似乎都支援。對於給定的 CSS，CSSStyleDeclaration 物件僅包含有效的屬性寬度並跳過 -my-foo。

有趣的是，DOM-Level-2 樣式規範規定所有指定的屬性都應透過 CSSStyleDeclaration 介面可用。可能有一些瀏覽器支援此行為。

DIY 方法：

作為解決方法，您可以使用 document.getElementsByTagName("style" 解析原始 CSS 文字)[0].innerText。然而，這可能是一種麻煩的方法。

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