一键换肤这个功能很多时候都需要用到,其实通过简单的css和js就可以实现
简单来说就是通过定义css变量,然后js改变变量就行,这里需要用到css的var()
首先是声明css变量
body {
--myColor: blue;
}
接下来是使用变量
.main {
background-color: var(--myColor);
width: 300px;
height: 300px;
}
很简单使用方法,注意的是var(–myColor,red)可以接受两个参数,当第一个参数取不到值或者某些浏览器不支持自定义属性时,会使用第二个参数作为值
还有就是需要注意作用域,需要是当前作用域下
最后就是js点击一键换肤时更改颜色了
document.body.style.setProperty('--myColor', 'red')