从 javascript 访问 CSS 变量

javascript css css-variables

2022-08-30 04:17:02

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

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

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

答案 2

使用这个：

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

你可以像这样改变它：

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

源