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

Question

假设我有以下CSS：

div {
    -my-foo: 42;
}

我以后能否以某种方式知道-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 spec所说的：

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

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

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

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

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

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

Answer 2

CSS自定义属性

DOM Level 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"。

Answer 3

在Mac 10.12.6（或其他版本，也许）中，如果要以以下方式存储某些属性：

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

然后您使用span.style.getPropertyValue（'-my-foo'）进行获取，您将获得如下值：

[{'a': 'b'}]

这意味着如果您想通过JSON.styleify值以样式（用于某些特殊用途，例如.dtd limit等）存储某些字符串/对象，并想通过JSON.parse进行解析，则会陷入困境通过解析器err，该err消息说“不允许在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);