主要原理是利用 css 变量设置颜色，用 js 动态修改变量，使颜色变化，兼容性如下；
实现换肤之前先要了解一下伪类选择器 :root ，还有css的 var() 函数和 setProperty() 函数
:root 是一个伪类，表示文档根元素，非 IE 及 IE8 及以上浏览器都支持，在 :root 中声明相当于全局属性，只要当前页面引用了 :root 所在的文件，都可以使用css var() 函数来引用；
语法
var() 函数，可以代替元素中，任何属性中的值的任何部分； var() 函数不能作为属性名、选择器或者其他除了属性值之外的值，这样做通常会产生无效的语法或者一个没有关联到变量的值；
语法
setProperty() 方法用于设置一个新的 css 属性，同时也可以修改 css 声明块中已存在的属性，兼容性如下；
语法
如果看了觉得有帮助的，我是@ 鹏多多11997110103 ，欢迎 点赞 关注 评论；END
往期文章
个人主页
首先准备好几种风格的css文件：样式部分：
<link id="css" rel="stylesheet" type="text/css" href="style.css"/>
js部分
function redCSS(){
document.getElementById("css").href="red.css"
}
html部分
<span onclick="redCSS">切换红色风格</span>
如果需要下次打开页面抱持这个风格，那么需要用到cookie
<link href="skins/yellow/yellow.css" rel="stylesheet" type="text/css" id="cssfile" />刚开始的时候要给link命名id="cssfile"，然后加上下面的就行了，其实就是更换样式表；
JS:
<script language="javascript">
function changestyle(name){
css=document.getElementById("cssfile")
css.href="skins/"+name+"/"+name+".css"
document.all.sel.options[0].selected=true
}
</script>
select：
<select name="sel" onchange="changestyle(this.options[this.options.selectedIndex].value)">
<option value="base">请选择</option>
<option value="base">经典蓝</option>
<option value="black">冷酷黑</option>
<option value="yellow">秋天黄</option>
<option value="blue">蓝色的</option>
</select>
