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

Question

假设我有以下CSS:

div {
    -my-foo: 42;
}

以后我可以用JavaScript以某种方式知道-my-foo给定的CSS属性的值是div什么吗？

Answer 1

我不认为你可以访问无效的属性名称,至少它对我来说不适用于Chrome或Firefox.CSSStyleDeclaration只是跳过invalid属性.对于给定的CSS:

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

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

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

然而,有趣的是这是DOM-Level-2 Style规范所说的:

虽然实现可能无法识别CSS声明块中的所有CSS属性,但是期望通过CSSStyleDeclaration接口提供对样式表中所有指定属性的访问.

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

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

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

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

但这对我来说似乎很多工作,并且不知道你这样做的原因,我不能说你的问题是否存在更好的替代方案.