从 javascript 访问 CSS 变量

有没有从 javascript 访问 css 变量的方法? 这里是我的 css 变量声明。

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

javascript
css
css-variables

90301 次浏览

小开

用这个:

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

你可以这样改变它:

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

来源

小开

最佳答案

只是标准的方式:

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