从 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 文本进行额外的解析和操作。