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

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

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

div {
    -my-foo: 42;
}

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

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

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

document.getElementsByTagName("style")[0].innerText

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