JavaScript 可以存取具有無效名稱的自訂 CSS 屬性嗎？

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

可以使用 - 前綴建立自訂 CSS 屬性。但是，可以從 JavaScript 存取這些自訂屬性嗎？

不幸的是，答案是否定的，至少在 Chrome 和 Firefox 等主流瀏覽器中是如此。 CSS 解析器會忽略名稱無效的自訂 CSS 屬性。例如，考慮以下 CSS：

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

即使此 CSS 套用於 div，嘗試使用 JavaScript 存取 -my-foo 屬性也不會傳回任何內容。 CSSStyleDeclaration 物件將只包含有效的屬性，例如寬度或高度。

此行為符合 CSSStyleDeclaration 規範。規範規定物件應該只包含“指定的屬性”，這意味著自訂屬性不被識別。但是，某些實作可能支援存取自訂屬性，但這並不能保證。

如果存取自訂 CSS 屬性對您的應用程式至關重要，您可以透過解析原始 CSS 文字來繞過 JavaScript 的限制。這可以使用樣式元素的innerText屬性來完成：

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

雖然這種方法有效，但它並不像直接從 CSSStyleDeclaration 物件存取屬性那麼簡單。此外，它需要對 CSS 文字進行額外的解析和操作。

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