主要原理是利用 css 变量设置颜色,用 js 动态修改变量,使颜色变化,兼容性如下;
实现换肤之前先要了解一下伪类选择器 :root ,还有css的 var() 函数和 setProperty() 函数
:root 是一个伪类,表示文档根元素,非 IE 及 IE8 及以上浏览器都支持,在 :root 中声明相当于全局属性,只要当前页面引用了 :root 所在的文件,都可以使用css var() 函数来引用;
语法
var() 函数,可以代替元素中,任何属性中的值的任何部分; var() 函数不能作为属性名、选择器或者其他除了属性值之外的值,这样做通常会产生无效的语法或者一个没有关联到变量的值;
语法
setProperty() 方法用于设置一个新的 css 属性,同时也可以修改 css 声明块中已存在的属性,兼容性如下;
语法
如果看了觉得有帮助的,我是@ 鹏多多11997110103 ,欢迎 点赞 关注 评论;END
往期文章
个人主页
CSS变量定义通过在变量名前加 var- 前缀实现,引用时使用 var() 获取变量值。例如::root {
var-companyblue: #369
var-lighterblue: powderblue
}
h1 {
color: var(companyblue)
}
h2 {
color: var(lighterblue)
}
目前从 Can I use 上获取的信息显示除了 Edge 外主流浏览器的最新版都已经支持这个特性了,随后微软最新确认,EdgeHTML 15.15061中已经增加了对CSS自定义属性的支持!
拓展:
CSS变量:也称作“自定义属性”;CSS 自定义属性是可以级联的:每一个自定义属性可以多次出现,并且变量的值将会借助级联算法和自定义属性值运算出来。