如何在 JavaScript 中检索无效/自定义 CSS 属性的值？

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

定义自定义或无效 CSS 属性（如“-my-foo”）时，开发人员可能想知道是否可以从 JavaScript 中检索它们的值。

为了回答这个问题，我们假设我们有如下所示的 CSS：

div {
    -my-foo: 42;
}

尝试访问“-my”的值通过 CSSStyleDeclaration 对象从 JavaScript 发出“-foo”可能会导致困难。 Chrome 和 Firefox 中的测试表明，这些浏览器会跳过无效属性，仅公开有效属性。例如，对于像这样的 CSS：

div {
    width: 100px;
    -my-foo: 25px;
}

CSSStyleDeclaration 对象将仅包含以下键：

0: width
cssText: "width: 100px"
length: 1

因此，使用 JavaScript 从 JavaScript 获取“-my-foo”的值此方法不可行。

但是，DOM-Level-2 样式规范指出“实现 [浏览器] 预计将通过 CSSStyleDeclaration 接口提供对所有指定属性的访问...”。这表明浏览器理论上应该列出对象中的无效属性，即使它们无法识别它们。

作为解决方法，可以解析原始 CSS 文本以检索自定义属性的值。然而，不推荐这种方法，因为它需要大量的努力，并且可能并不总是可靠或高效。

以上是如何在 JavaScript 中检索无效/自定义 CSS 属性的值？的详细内容。更多信息请关注PHP中文网其他相关文章！