css变量设置主题色切换
程序员文章站
2022-04-29 14:06:05
...
除了scss和less,css也可以使用变量,但是要新版本浏览器才行,微软edge浏览器也支持;
--name 声明变量, var(--name)使用变量
声明变量:
//全局css变量,可以在所有地方使用(权重最小,相当于 *选择器)
:root{
--main-color:#333;
--main-bg:#fff;
--mc: #06c;
--fc:var(--mc);
}
//body是标签选择器,会覆盖:root内的变量
body{
--mc: #409EFF;
}
//只有在#app内的元素可以使用到--pt变量
#app{
--pt:10px;//带单位的不能使用引号
}
.title{
--size:20;
--content:"hello";
}
使用变量:
.main{
color: var(--main-color);
}
//可以使用拼接,变量是数值时要使用calc计算,是字符串时可以直接拼接
.title p{
font-size:calc(var(--size) * 1px)
}
.title p:after{
content:var(--content)' world';
}
使用js新增修改删除查询变量:
document.body.style.setProperty('--mc','red') //修改
document.body.style.setProperty('--mb','#fff') //新增
document.body.style.setProperty('--mp','10px') //新增
let s=document.body.style.getPropertyValue('--mc').trim() //查询
console.log(s)
document.body.style.removeProperty('--mp'); //删除
使用js操作css变量后就可以去配置项目中的主题色。然后配合颜色选择插件,用户可以任意设置主题色
详情请看阮一峰的专门介绍:传送门