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

1，实现效果

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

2，实现原理

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

简单的JS+CSS实现网页自定义换肤实现换肤之前先要了解一下伪类选择器 :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 声明块中已存在的属性，兼容性如下；简单的JS+CSS实现网页自定义换肤

语法

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

3，完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>换肤</title>
    <style>
        *{ margin: 0;padding: 0; }
        #head{ height: 300px;border-bottom:1px solid gray; }
        #btn{ width: 100px;height: 40px;border-radius: 4px;text-align: center;line-height: 40px;color: #FFFFFF;cursor: pointer;margin-left: calc(50% - 50px); }
        #ipt{ width: 100%;height: 40px;line-height: 40px;font-size: 20px; text-align: center; border-right: none;border-left: none;}
        :root{
            --main_bg:#1E90FF;
        }
        .color{
            background-color: var(--main_bg);
        }
    </style>
</head>
<body>
    <div id="head" class="color"></div>
    <div id="body">
        <input type="text" id="ipt" placeholder="请输入颜色值">
        <div id="btn" class="color" onclick="changeBg()">变色</div>
    </div>

    <script>
        function changeBg(){
            let color = document.querySelector("#ipt").value;
            document.documentElement.style.setProperty("--main_bg",color);
        }
    </script>
</body>
</html>

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

往期文章

微信小程序实现上传多张本地图片到服务器和图片预览
JS实用方法DataUrl转为File、url转base64
微信小程序API交互的自定义封装

个人主页

CSDN
GitHub
简书
博客园
掘金

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用？: 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。

提示下载完但解压或打开不了？: 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量，若小于网盘提示的容量则是这个原因。这是浏览器下载的bug，建议用百度网盘软件或迅雷下载。若排除这种情况，可在对应资源底部留言，或联络我们.。

找不到素材资源介绍文章里的示例图片？: 对于PPT，KEY，Mockups，APP，网页模版等类型的素材，文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买，且本站不负责(也没有办法)找到出处。同样地一些字体文件也是这种情况，但部分素材会在素材包内有一份字体下载链接清单。