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中文网其他相关文章！