从javascript访问CSS变量

有没有办法从javascript访问css变量？这里是我的css变量声明

：根目录{
--彩色字体概述：#336699；
}

使用以下方法：

window.getComputedStyle(document.documentElement).getPropertyValue('--color-font-general');

你可以这样改变它：

document.documentElement.style.setProperty('--color-font-general', '#000');

标准方式：

使用获取计算样式

用于获取所需属性的值

getComputedStyle（元素）.getPropertyValue（'--color font general'）；

例如：

var style=getComputedStyle（document.body）
console.log（style.getPropertyValue（'--bar'））/#336699
console.log（style.getPropertyValue（'--baz'））//calc（2px*2）

---

：root{--foo:#336699；--bar:var（--foo）；--baz:calc（2px*2）；}

我真的很好奇，为什么你不想在javascript中重新声明这个变量，因为它更简单efficient@Dummy然后，需要在两个地方维护值，使代码更加脆弱（即，不是一种枯燥的方法），我不知道它使用的是哪个CSS文件。用户决定文件，每个文件对此变量有不同的值。此外，如果您有CSS变量，这些变量的值取决于活动的

@media

查询定义它们，那么您可以为自己节省更多的工作和重复的代码。它实际上是

document.documentElement.style.setProperty（'--color font general'，'#000'）；

如果您想更改它。哎哟，修复了。谢谢！您也可以这样获得：

element.style.getPropertyValue（）

@Rudie

element.style.getPropertyValue（）

只有在元素的内联样式上设置了变量（而不是通过CSS规则）时才会起作用看起来它在IE 10中不起作用，有没有指向正确方向的指针？@webkitfanz您确实意识到IE中不支持css变量，对吗？有没有一种方法可以做到这一点而不引起回流，因为getComputedStyle可以做到这一点？请注意，返回的值有前导空格，因此您会得到“#336699”而不是“#336699”这是很重要的，如果你想检查这个值（它可能不匹配，因为前面的空间，所以在检查之前考虑修剪）。@ EricMutta，我只是经历了这个。很烦人。为什么它们会在字符串中有一个领先的空间返回？