简单的JS+CSS实现网页自定义换肤

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了简单的JS+CSS实现网页自定义换肤相关的知识,希望对你有一定的参考价值。

参考技术A

主要原理是利用 css 变量设置颜色,用 js 动态修改变量,使颜色变化,兼容性如下;

实现换肤之前先要了解一下伪类选择器 :root ,还有css的 var() 函数和 setProperty() 函数

:root 是一个伪类,表示文档根元素,非 IE IE8 及以上浏览器都支持,在 :root 中声明相当于全局属性,只要当前页面引用了 :root 所在的文件,都可以使用css var() 函数来引用;

语法

var() 函数,可以代替元素中,任何属性中的值的任何部分; var() 函数不能作为属性名、选择器或者其他除了属性值之外的值,这样做通常会产生无效的语法或者一个没有关联到变量的值;

语法

setProperty() 方法用于设置一个新的 css 属性,同时也可以修改 css 声明块中已存在的属性,兼容性如下;

语法

如果看了觉得有帮助的,我是@ 鹏多多11997110103 ,欢迎 点赞 关注 评论;END

往期文章

个人主页

以上是关于简单的JS+CSS实现网页自定义换肤的主要内容,如果未能解决你的问题,请参考以下文章

android 换肤框架搭建及使用 (3 完结篇)

js实现换肤效果

记录--Vue3自定义一个Hooks,实现一键换肤

超简单的自定义个性化网页鼠标光标样式 html+css+js

css, js 项目联系之网页换肤

CSS实现不规则自定义进度条效果