【问题标题】：Can I access the value of invalid/custom CSS properties from JavaScript?我可以从 JavaScript 访问无效/自定义 CSS 属性的值吗？
【发布时间】：2010-05-28 02:34:01
【问题描述】：

假设我有以下 CSS：

div {
    -my-foo: 42;
}

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

【问题讨论】：

标签： javascript css

【解决方案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 是这么说的：

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

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

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

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

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

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

【讨论】：

非常有趣，尤其是关于 DOM 规范的部分，即自定义属性应该在 CSSStyleDeclaration 中公开。我发现 Mozilla 对此有一个错误，我会鼓励你和其他对此感兴趣的人表达他们的意见并为这个错误投票。我还为该错误添加了注释，更好地解释了我想使用它的场景。 bugzilla.mozilla.org/show_bug.cgi?id=116694
我在同一个错误中添加了一条评论，展示了如何使用自定义 CSS 属性的具体示例。
哇这个错误是在 2001 年提交的。仍然没有解决。我厌倦了成为一名网络开发人员。
正确，浏览器应该在 CSSStyleDeclaration 中保留未知样式和未知规则集，但它们没有。这一直是一个问题......从永远。浏览器在实现方面拒绝做一些事情，一旦时间过去，他们认为他们永远不需要重新审视它。因此，即使是最早的规范，也没有浏览器能 100% 符合要求。

【解决方案2】：

CSS 自定义属性

DOM 2 级样式

正如 Anurag 所指出的，这是 DOM Level 2 中提出的，后来被弃用了。 Internet Explorer 是唯一实现它的浏览器，他们停止在 Edge 中支持它。 IE 期望该属性不以破折号开头，因此 my-foo: 42; 应该可以工作。

CSS 变量样式

较新的浏览器支持 CSS 变量。它们以双破折号开头：--my-foo: 42;（它们可以像 font-size: var(--my-foo); 这样在其他地方重复使用）

示例

CSS

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

JS

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

浏览器支持

目前 Microsoft Edge 是唯一不支持这两种方法的浏览器，但在 Edge 中编写 CSS 变量时为 "under active development"。

【讨论】：

【解决方案3】：

在 Mac 10.12.6（或其他版本，可能）中，如果您想以如下样式存储某些属性：

<span style="--my-foo: [{"a": "b"}]">text</span>

然后你使用 span.style.getPropertyValue('--my-foo') 来获取，你会得到如下的值：

[{'a': 'b'}]

这意味着如果您想通过 JSON.stringify 以样式存储一些字符串/对象（用于某些特殊目的，例如 .dtd 限制等），并希望通过 JSON.parse 解析回来，您将陷入困境通过解析器错误，错误消息说“JSON 中不允许单引号”。

在 Mac 10.12.6 Safari 中尝试以下操作：

var span = document.createElement('span');
span.id = 'some_id';
var data =  JSON.stringify([{d: 'e'}]);
span.style = `--b-c: ${data}`;
document.body.appendChild(span);
var f = document.getElementById('some_id').style.getPropertyValue('--b-c');
console.log('f:', f);

【讨论】：