从 javascript 访问 CSS 变量

Question

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

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

Answer 1

使用这个：

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

你可以这样改：

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

source

Answer 2

只是标准方式：

1. 使用 getComputedStyle
获取计算样式
2. 使用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); }