javascript - 从 javascript 访问 CSS 变量

Question

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

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

Answer 1

只是标准方式：

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); }

Answer 2

用这个：

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

你可以像这样改变它：

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

来源