CSS学习之如何用js修改css

背景

无论是移动端还是web端，通常会遇到切换主题色的需求，为了保持整体页面风格统一，避免不了CSS的调整。为了尽可能的减少代码变动，需要将页面中的公共颜色提取，用一个CSS变量去集中控制整体颜色的变化。

CSS自定义颜色变量

基本用法：

声明一个自定义属性变量，属性需要以“–”开始，属性值可以是任何有效的CSS值。如：

:root{
	--theme-color:red;
}

规则集所指定的选择器决定了自定义属性的可见域。定义在根伪类:root下的自定义属性，可以在全局任何地方访问到它。

备注： 自定义属性名是大小写敏感的，–my-color 和 --My-color 会被认为是两个不同的自定义属性。

使用：

局部变量使用自定义变量前，首先要确保能访问到自定义变量。若自定义变量维护在一个公共css文件中，无法直接访问到该自定义变量，那么需要先引入该公共文件，才能使用。

使用时需要用var()函数进行包裹：

.box {
  background-color: var(--theme-color);
}

或者

.box {
  background-color: var(--theme-color，"green");
}

var()传入第二个参数，表示若–theme-color不生效，则默认显示"green"。

如何改主题色？

html{
	--theme-color:red;
}

修改成绿色：

document.documentElement.style.setProperty('--theme-color', 'blue')

用这个方法，把自定义属性放:root里，改动了属性值，但是页面无变化。但是把自定义属性放html选择器下就生效了。

参考：任意门