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

假设我有以下CSS：

div {
    -my-foo: 42;
}

---

稍后在JavaScript中，我能知道-my foo CSS属性对于给定div的值吗？

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

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

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

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

然而，有意思的是，这是政府所说的：

虽然实现可能无法识别CSS声明块中的所有CSS属性，但它希望通过CSSStyleDeclaration接口提供对样式表中所有指定属性的访问。 这意味着CSSStyleDeclaration对象应该在上面的示例中列出-my foo属性。也许有一些浏览器支持它

我用于测试的代码位于

注意：你总是可以通过解析原始文本来DIY。例如：

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

但这对我来说似乎是一个很大的工作，我不知道你这样做的原因，我不能说是否有更好的替代方案来解决你的问题。

CSS自定义属性 DOM级别2样式 正如Anurag所指出的，这是在DOM级别2中提出的，后来被弃用。Internet Explorer是唯一一个实现它的浏览器，他们在Edge中不再支持它。IE希望房产不会以破折号开始，所以我的foo:42；应该有用

CSS变量样式 较新的浏览器支持CSS变量。这些以双破折号开始：-my foo:42；它们可以在其他地方重复使用，比如字体大小：var my foo

实例 CSS JS 浏览器支持

---

目前，Microsoft Edge是唯一一款不支持这两种方法的浏览器，但在编写Edge中的CSS变量时，如果您希望以以下样式存储某些属性，则Mac 10.12.6或其他版本中的CSS变量可能是。

：

文本 然后使用span.style.getPropertyValue'-my foo'获取，您将获得如下值：

[{'a'：'b'}] 这意味着，如果您希望通过JSON.stringify将某些字符串/对象存储在样式中，以用于某些特殊用途，如.dtd limit等，并希望通过JSON.parse进行解析，您将被解析器err卡住，错误消息称“single quote”不允许在JSON中使用

在Mac 10.12.6 Safari中尝试以下内容：

var span=document.createElement'span'； span.id='某个_id'； var data=JSON.stringify[{d:'e'}]； span.style=`-b-c:${data}`； document.body.appendChildspan； var f=document.getElementById'some_id'。style.getPropertyValue'-b-c'； console.log'f:'，f；

---

非常有趣，特别是关于DOM规范的部分，它说定制属性应该在CSSStyleDeclaration中公开。我发现Mozilla对此有一个bug，我鼓励您和其他对此感兴趣的人发表意见并投票支持这个bug。我还为这个bug添加了一条注释，更好地解释了我想要使用它的场景。我在同一个bug中添加了一条注释，展示了一个如何使用自定义CSS属性的具体示例。哇，这个bug是2001年提出的。仍然没有解决。我厌倦了做一名web开发人员。没错，浏览器应该在CSSStyleDeclaration中保留未知的样式和未知的规则集，但它们没有。这是一个问题，从…到永远。在实现方面，浏览器拒绝做一些事情，一旦时间过去，他们认为他们永远不需要重新访问它。因此，即使是最早的规格，也没有一款浏览器能够100%符合要求。

div {
  --my-foo: 42;
  my-foo: 42;
}

// Chrome 49, Firefox 31, Safari 9.1 (future Edge):
const cssVariable = bodyStyles.getPropertyValue('--my-foo')
// IE:
const cssCustomProperty = bodyStyles['my-foo']