1，实现效果

2，实现原理

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

实现换肤之前先要了解一下伪类选择器 :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);

3，完整代码

 1 <!DOCTYPE html>

 2 <html lang="en">

 3 <head>

 4     <meta charset="UTF-8">

 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">

 6     <title>换肤</title>

 7     <style>

 8         *{ margin: 0;padding: 0; }

 9         #head{ height: 300px;border-bottom:1px solid gray; }

10         #btn{ width: 100px;height: 40px;border-radius: 4px;text-align: center;line-height: 40px;color: #FFFFFF;cursor: pointer;margin-left: calc(50% - 50px); }

11         #ipt{ width: 100%;height: 40px;line-height: 40px;font-size: 20px; text-align: center; border-right: none;border-left: none;}

12         :root{

13             --main_bg:#1E90FF;

14         }

15         .color{

16             background-color: var(--main_bg);

17         }

18     </style>

19 </head>

20 <body>

21     <div id="head" class="color"></div>

22     <div id="body">

23         <input type="text" id="ipt" placeholder="请输入颜色值">

24         <div id="btn" class="color" onclick="changeBg()">变色</div>

25     </div>

26

27     <script>

28         function changeBg(){

29             let color = document.querySelector("#ipt").value;

30             document.documentElement.style.setProperty("--main_bg",color);

31         }

32     </script>

33 </body>

34 </html>

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

END

个人主页

简单的JS+CSS实现网页自定义换肤的更多相关文章

  1. 用js来实现页面的换肤功能(带cookie记忆)

    用js来实现页面的换肤功能 js实现换肤功能的实现主要是通过利用js控制CSS来实现的.大致的实现原理是这样的, 1.先定义一个页面基本样式style.css来确定div的宽高等属性,使得整个页面的D ...

  2. apache模块 合并多个js/css 提高网页加载速度

    win :  http://blog.csdn.net/mycwq/article/details/9361117 linux :http://blog.csdn.net/mycwq/article/ ...

  3. 简单html js css 轮播图片，不用jquery

    这个是自己修改的轮播图片,在网上有的是flash 实现的轮播图片,对搜索引擎不友好, 比如:dedecms 的首页的轮播图是用flash实现滚动的. 所以这个自己修改了一下,实现html+js+css ...

  4. 利用CSS预处理技术实现项目换肤功能(less css + asp.net mvc4.0 bundle)

    一.背景 在越来越重视用户体验的今天,换肤功能也慢慢被重视起来.一个web系统用户可以选择一个自己喜欢的系统主题,在用户眼里还是会多少加点分的.我们很开心的是easyui v1.3.4有自带defau ...

  5. js实现换肤效果

    一,js换肤的基本原理 基本原理很简单,就是使用 JS 切换对应的 CSS 样式表文件.例如导航网站 Hao123 的右上方就有网页换肤功能.除了切换 CSS 样式表文件之外,通常的网页换肤还需要通过 ...

  6. js css div 点亮半颗星星（二）

    上回说到js css点亮星星 换种方式来点亮 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  7. javascript进行百度换肤 和显示隐藏一个窗口的操作

    简单的运用javascript来进行百度换肤的操作 <!DOCTYPE html> <html lang="en"> <head> <me ...

  8. Android QMUI实战：实现APP换肤功能，并自动适配手机深色模式

    Android换肤功能已不是什么新鲜事了,市面上有很多第三方的换肤库和实现方案. 之所以选择腾讯的QMUI库来演示APP的换肤功能,主要原因: 1.换肤功能的实现过程较简单.容易理解: 2.能轻松适配 ...

  9. Android实现换肤功能（二）

    前两天写的上章关于换肤的功能获得了很好的反响,今天为大家介绍另一种方式.今天实现的策略也是网友建议的,然后我自己去写了个demo,大家自己评估下相比第一种方式的优势和劣势在哪里. 简单介绍下关于第一种 ...

随机推荐

  1. 珍藏的C语言编程系列教程

    本文有332个文字,大小约为2KB,预计阅读时间1分钟 这是本人珍藏的C语言.C++系列教程. 相信每个Coder的第一门编程语言就是C语言吧, 现在也依然很热门,不谈了.直接上链接,感兴趣的直接存, ...

  2. sqli-labs lexx25-28a(各种过滤)

    less-25AND OR 过滤 less-25a基于Bool_GET_过滤AND/OR_数字型_盲注 less-26过滤了注释和空格的注入 less-26a过滤了空格和注释的盲注 less-27过滤 ...

  3. 移动 WEB 开发的布局方式 ---- 响应式布局

    一.响应式简介 一个页面布局兼容了 PC端 ,iPad端 和 移动端 所谓的响应式就是页面中的布局会随着屏幕的大小变化发生了响应而做出不同的页面布局模型 特点: 响应式布局是不需要单独写移动端页面的 ...

  4. vue第五单元(v-if和v-show以及v-for的灵活应用 watch以及computed的区别 （常见效果） #课程目标

    第五单元(v-if和v-show以及v-for的灵活应用 watch以及computed的区别 (常见效果) #课程目标 精通 v-if v-else v-else-if 的使用 精通 v-show  ...

  5. 如何最简单、通俗地理解Python的文件？

    原文链接:https://www.zhihu.com/question/431437471/answer/1588566615 一.笔记 1) Python文件 ① Python文件后缀一般以 .py ...

  6. IIS添加应用程序和虚拟目录

    右键添加应用程序 别名就是虚拟路径 比如本来路径是http://localhost:44336/main.html    别名为  qwer  那么就可以访问http://localhost:4433 ...

  7. MySQL获取上月第一天、上月最后日、本月第一天、本月最后日的方法

    直接贴SQL语句了 #上月第一天 SELECT DATE_FORMAT(DATE_SUB(CURDATE(),INTERVAL 1 MONTH),'%Y-%m-01'); #上月最后日 SELECT ...

  8. （一）必须掌握的linux命令行快捷键

    1.序 使用linux时,接触最多的莫过于命令行,参差不齐,形形色色,对于短的命令行使用脑残的上下左右,back,del就够用了:而对于带有很多参数的长的命令行,再使用上下左右,del,back显得那 ...

  9. 老吕教程--01后端Node.js框架搭建（安装调试KOA2）

    今天开始从零搭建后端框架,后端框架基于Koa2,通过Typescript语言编写. 在写后端框架之前,自己也了解过Express,感觉Koa2更加灵活,由于有多年后端研发经验,所以采用Koa2,简单敏 ...

  10. Atlas 2.1.0 实践（2）—— 安装Atlas

    在完成Atlas编译以后,就可以进行Atlas的安装了.Atlas的安装主要是安装Atlas的Server端,也就Atlas的管理页面,并确保Atlas与Kafka Hbase Solr等组件的集成. ...