javascript - 我可以从 JavaScript 访问无效/自定义 CSS 属性的值吗？

Question

假设我有以下 CSS:

div {
    -my-foo: 42;
}

我稍后可以在 JavaScript 中以某种方式知道 -my-foo CSS 属性对于给定 div 的值是多少？

Answer 1

我认为您不能访问无效的属性名称，至少它在 Chrome 或 Firefox 中对我不起作用。 CSSStyleDeclaration 只是跳过无效的属性。对于给定的 CSS:

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

style:CSSStyleDeclaration 对象仅包含以下键:

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

然而，有趣的是这就是 DOM-Level-2 Style spec说:

While an implementation may not recognize all CSS properties within a CSS declaration block, it is expected to provide access to all specified properties in the style sheet through the CSSStyleDeclaration interface.

暗示 CSSStyleDeclaration 对象应该在上面的示例中列出 -my-foo 属性。也许那里有一些支持它的浏览器。

我用于测试的代码位于 http://jsfiddle.net/q2nRJ/1/ .

注意:您始终可以通过解析原始文本来 DIY。例如:

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

但这对我来说似乎是很多工作，并且不知道您这样做的原因，我不能说是否存在更好的替代方法来解决您的问题。