关于前端一键换肤功能 css定义变量var()

一键换肤这个功能很多时候都需要用到,其实通过简单的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')

通过setProperty方法可以更改自己的css变量颜色

这样就可以实现一个简单的一键换肤功能