我正在处理一个相当长的CSS文件。我知道客户可能会要求更改配色方案,我想知道:是否可以将颜色分配给变量,这样我就可以更改一个变量,使新颜色应用于使用它的所有元素
请注意,我不能使用PHP动态更改CSS文件
CSS通过CSS变量本机支持这一点
示例CSS文件
:根目录{
--主色:#06c;
}
#福{
颜色:var(--主色);
}
对于一个工作示例,请参见此JSFIDLE(示例显示fiddle中的一个CSS选择器将颜色硬编码为蓝色,另一个CSS选择器使用CSS变量(原始语法和当前语法)将颜色设置为蓝色)
在JavaScript/客户端中操作CSS变量
document.body.style.setProperty('--main color',“#6c0”)
所有现代浏览器都支持
Firefox 31+、Chrome 49+、Safari 9.1+、Microsoft Edge 15+和Opera 36+附带对CSS变量的本机支持