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

1，实现效果

---

效果图

2，实现原理

---

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

兼容性

3，实现过程

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

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

语法

// 自定义属性的名称，必需以 -- 开头
:root{
   --main_bg:#1E90FF;
   --main_color:rgba(0,100,200,1);
};

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

语法

// var(--name,value)
// --name，自定义属性的名称，必需以 -- 开头; value，可选，备用值，在属性不存在的时候使用;
.box{
    background-color: var(--main_bg);
    color: var(--box_color, red);
    border: var(--box_border,10px solid #000000);
}

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

兼容性

语法

let box = document.querySelector("#box").value;
document.documentElement.style.setProperty("--main_bg",box);

4,完整代码

    
    
    
    


    

    

        
        
变色
    

    

---

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

往期文章

• 微信小程序实现上传多张本地图片到服务器和图片预览
• 微信小程序API交互的自定义封装

个人主页

• CSDN
• GitHub
• 博客园
• 掘金