从javascript访问CSS变量[重复]答案

【问题标题】：Access CSS variable from javascript [duplicate]从javascript访问CSS变量[重复]
【发布时间】：2017-06-03 04:53:25
【问题描述】：

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

:root {
  --color-font-general: #336699;
}

【问题讨论】：

我真的很好奇为什么你不想在更有效的javascript中重新声明那个变量
@Dummy 那么会有两个地方需要维护值，使代码更加脆弱（即不是 DRY 方法）。
就我而言，我不知道它使用的是哪个 CSS 文件。用户决定文件，每个文件对这个变量都有不同的值。
此外，如果您的 CSS 变量具有不同的值，具体取决于哪个活动的@media 查询定义它们，您可以节省更多的工作和重复代码。

标签： javascript css css-variables

【解决方案1】：

只是标准方式：

使用getComputedStyle 获取计算样式
使用getPropertyValue 获取所需属性的值

getComputedStyle(element).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); }

【讨论】：

看起来它在 IE 10 中不起作用，是否有正确方向的指针？
@webkitfanz 你确实意识到 IE 不支持 css 变量，对吧？
有没有办法做到这一点而不会导致回流，因为 getComputedStyle 会这样做？
请注意，返回的值有前导空格，因此您将得到“#336699”而不是“#336699”。如果您尝试检查该值，这很重要（由于前导空格它可能不匹配，因此请考虑在检查之前对其进行修剪）。
@EricMutta 我刚刚经历过。很烦人。为什么他们会在字符串中返回一个前导空格？

【解决方案2】：

使用这个：

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

你可以这样改变它：

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

source

【讨论】：

如果你想改变它，它实际上是document.documentElement.style.setProperty('--color-font-general', '#000');。
哎呀修复了。谢谢！
你也可以这样获取：element.style.getPropertyValue()
@Rudie element.style.getPropertyValue() 只有在元素的内联样式上设置了变量（而不是通过 CSS 规则）时才会起作用