:root {
var-companyblue: #369
var-lighterblue: powderblue
}
h1 {
color: var(companyblue)
}
h2 {
color: var(lighterblue)
}
主要原理是利用 css 变量设置颜色,用 js 动态修改变量,使颜色变化,兼容性如下;
实现换肤之前先要了解一下伪类选择器 :root ,还有css的 var() 函数和 setProperty() 函数
:root 是一个伪类,表示文档根元素,非 IE 及 IE8 及以上浏览器都支持,在 :root 中声明相当于全局属性,只要当前页面引用了 :root 所在的文件,都可以使用css var() 函数来引用;
语法
var() 函数,可以代替元素中,任何属性中的值的任何部分; var() 函数不能作为属性名、选择器或者其他除了属性值之外的值,这样做通常会产生无效的语法或者一个没有关联到变量的值;
语法
setProperty() 方法用于设置一个新的 css 属性,同时也可以修改 css 声明块中已存在的属性,兼容性如下;
语法
如果看了觉得有帮助的,我是@ 鹏多多11997110103 ,欢迎 点赞 关注 评论;END
往期文章
个人主页
css自定义属性css自定义属性分为全局定义属性和局部定义属性。
一:全局
1.定义:
:root{//此处的root是固定的。
--them-color:blue //自定义属性时以--开头,告诉浏览器这是自定义的。
}
2.使用:
<style type="text/css">
.div{
background-color:var(--them-color)
//如果自定义的属性出不来或其他问题,可在之后写属性值。例如:background-color:var(--them-color,blue)
也可写另一个属性名:background-color:var(--them-color,var(--them-color1))
}
</style>
<div class="div">111</div>
二:局部
1:定义
.foo{
--them-color:yellow
}
.div{
color:var(--them-color)
}
2:使用:
<div class="foo div">121321</div> //此处的foo相当于一个基类,目的是存取所有的属性值,他的子元素从这个库里取属性。
例子:
<style type="text/css">
.foo{
--them:yellow
--width-outer:800px
--height-outer:400px
--width-inner:100px
--height-inner:100px
--bg-inner1:red
--bg-inner2:orange
--bg-inner3:purple
}
.div{
width: var(--width-outer)
height: var(--height-outer)
border:1px solid var(--them)
margin: 20px auto
}
.foo div:nth-child(1){
width: var(--width-inner)
height: var(--height-inner)
background-color: var(--bg-inner1)
}
.foo div:nth-child(2){
width: var(--width-inner)
height: var(--height-inner)
background-color: var(--bg-inner2)
}
.foo div:nth-child(3){
width: var(--width-inner)
height: var(--height-inner)
background-color: var(--bg-inner3)
}
</style>
<body>
<div class="div">
<div></div>
<div></div>
<div></div>
</div>
</body>
四:总结
在一个组件里或者全局将经常使用的属性提取出来,比如主题色,用的时候直接使用变量。便于维护代码,改的时候直接改一处即可。