主要原理是利用 css 变量设置颜色，用 js 动态修改变量，使颜色变化，兼容性如下；
实现换肤之前先要了解一下伪类选择器 :root ，还有css的 var() 函数和 setProperty() 函数
:root 是一个伪类，表示文档根元素，非 IE 及 IE8 及以上浏览器都支持，在 :root 中声明相当于全局属性，只要当前页面引用了 :root 所在的文件，都可以使用css var() 函数来引用；
语法
var() 函数，可以代替元素中，任何属性中的值的任何部分； var() 函数不能作为属性名、选择器或者其他除了属性值之外的值，这样做通常会产生无效的语法或者一个没有关联到变量的值；
语法
setProperty() 方法用于设置一个新的 css 属性，同时也可以修改 css 声明块中已存在的属性，兼容性如下；
语法
如果看了觉得有帮助的，我是@ 鹏多多11997110103 ，欢迎 点赞 关注 评论；END
往期文章
个人主页
项目要求通过js来控制进行一键换肤，例如把#ffffff改成#000000的颜色等，通过一系列的方法对比，结出比较合适的方案是： 通过ocument.body.style.setProperty方法来给body上添加变量，在css中应用变量，然后在js中控制变量的。例如:'--color1a" 是为了解决变量中有透明度要求的问题。
此方法优势有：不需要引用插件，使用原生js, css使用var函数, 兼容性强。
在css中使用如下：
js方法如下：
<link href="css/color1.css" id="color" rel="stylesheet" type="text/css" /><!--注意这行的id--><a onclick="changeStyle(1)">样式1</a>
<a onclick="changeStyle(2)">样式2</a>
上面是html，下面是js.把选定的样式加载进cookies ,网页加载先查cookie。
function getObject(elementId) { //获取指定id的objectif (document.getElementByIdx) { return document.getElementByIdx(elementId) }
else if (document.all) { return document.all[elementId] }
else if (document.layers) { return document.layers[elementId] }
}
function changeStyle(id){//切换样式
var stylesheet=getObject("color").href="css/color"+id+".css"
document.cookie="stylesheet="+escape(stylesheet)//写入Cookie
//alert(document.cookie)
//alert(stylesheet)
}
function initStyle(){ //初始化样式，如果cookie存在样式，则加载cookie样式，否则加载默认样式
if(/stylesheet=([^]+)/.test(document.cookie))//判断是否存在cookie.
getObject("color").href=unescape(RegExp.$1)
//alert(/stylesheet=([^]+)/.test(document.cookie))
}initStyle()
