换肤功能实现过程

css3的自定义属性

:root{--primary-color:#009688;--light:#fff;--dark:#000;}

自定义属性：–primary-color、–light、–dark

自定义属性的命名规则：

–variables-name:variables-value

–属性名：属性值

设置作用域：

:root 作用于全局

:root{–theme-color:red;}

#app{–theme-color:red;}//作用于id为app的节点内

使用自定义属性：

//全局定义该属性:root{--theme-color:red;}//使用该属性#app{background-color:var(--theme-color);}//假如没有指定--theme-color这个属性，可以在使用的时候加上替代值#app{//当没有指定--theme-color属性值，则会为background-color设置black值background-color:var(--theme-color,black);}

如何通过js获取和设置自定义属性

获取自定义属性值

//在js中获取--theme-color的值var styles = getComputedStyle(document.documentElement)var value = styles.getPropertyValue("--theme-color");

更改自定义属性值

document.dcumentElement.style.setProperty("--theme-color","black")

js使用getComputedStyle()方法获取指定元素的css样式

/download/weixin_37480339/13979840

上面链接是一个小demo，已实现切换主题功能，效果如下：，可以点击不同按钮切换背景色