我可以从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样式规范所说的：

尽管实现可能无法识别CSS声明块中的所有CSS属性，但是它有望通过CSSStyleDeclaration接口提供对样式表中所有指定属性的访问。

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

我用于测试的代码位于。

注意 ：您始终可以通过解析原始文本进行DIY。例如：

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

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