我们可以在 JavaScript 中访问自定义或无效 CSS 属性的值吗？

从 JavaScript 访问无效/自定义 CSS 属性的值

在 Web 开发领域，CSS 属性对于样式元素至关重要。虽然定义了许多标准 CSS 属性，但您可能会遇到想要使用自己的自定义属性的情况。这就提出了一个问题：我们可以在 JavaScript 中访问这些无效或自定义 CSS 属性的值吗？

要探索这一点，请考虑以下 CSS：

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

假设您有这样的样式声明，您可以使用 JavaScript 检索给定 div 元素的 -my-foo 属性的值吗？

常规方法

不幸的是，直接访问 invalid 的值CSS 属性无法通过传统方式实现。浏览器往往会忽略无法识别的或自定义的属性，因此您不会发现它们列在 CSSStyleDeclaration 对象中。例如，在给定的 CSS 示例中， style:CSSStyleDeclaration 对象将仅包含 width 属性。

可能的替代方案

虽然传统方法可能不起作用，但有另一种方法。您可以手动解析原始 CSS 文本以检索自定义属性的值。例如，您可以使用以下代码：

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

此代码检索整个原始 CSS 文本，并允许您搜索您感兴趣的自定义属性值。请记住，此方法需要额外的

注意：

值得注意的是 CSSStyleDeclaration 接口，由 DOM-Level-2 样式规范定义，意味着所有指定的属性，包括无效的属性，都应该可以通过接口访问。然而，大多数浏览器目前并不遵守这部分规范。

以上是我们可以在 JavaScript 中访问自定义或无效 CSS 属性的值吗？的详细内容。更多信息请关注PHP中文网其他相关文章！