一尘不染

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

css

假设我有以下CSS:

div {
    -my-foo: 42;
}

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


阅读 225

收藏
2020-05-16

共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

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

2020-05-16