欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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变量后就可以去配置项目中的主题色。然后配合颜色选择插件,用户可以任意设置主题色

详情请看阮一峰的专门介绍:传送门