切换样式表可能有人不理解，但说到网站换肤，大概率就很多人都明白了。因为它是很多网站都已经有的功能了，最常见的就是很多网站的关灯模式。本文，就给大家分享一个我自己网站上使用的样式表切换的方案。
案例效果
目录结构
文件准备
JQ文件
准备jquery文件，因为我们要修改cookie，所以...
jquery-3.5.1.js
jquery.cookie.js
样式表
我们新建了一个文件夹叫做“CSS换肤小demo”，准备了7个CSS文件在里面。
其中，默认样式我们存放在default.css 中。其他6个样式表文件，都简单的写了两行样式表，为了演示换肤功能，只对页面背景色和h1标题的前景色进行了改变。
/* 准备换的样式表 */
body{ background: #xxx; }
h1{ color: #xxxxxx; }默认样式表default.css 的代码如下：
*{margin:0;padding: 0;
}
ul li{list-style-type: none;
}.container{/* 居中 */position: fixed; left: 50%;top: 40%;transform: translate(-50%, -50%); width:50%;
}h1{margin: 20px 0px;text-align: left;
}
#skin li{ padding-left: 30px;position: relative;width: 20px;height: 20px;display: inline-block;
}
li::after{cursor: pointer;content: '';position: absolute;width: 20px;height: 20px;display: block;padding:3px; top:0px;left: 0px;background: #999;border:2px solid #fff;border-radius: 10px;transition: all .5s; /* 按钮响应动画效果的持续时间 */
}.skin_0::after{ background: #ddd; }
.skin_1::after{ background: #cc80ff; }
.skin_2::after{ background: #ff8080; }
.skin_3::after{ background: #66d9ff; }
.skin_4::after{ background: #ff884d; }
.skin_5::after{ background: #99ff66; }li:hover::after{border-radius: 5px;transition: all .5s; /* 按钮响应动画效果的持续时间 */
}
.selected::after{ color:#fff;content: '✔';
}HTML结构
在head标签内引用样式表文件和JQ文件：
/* 样式表文件 */
<link href="css/default.css" rel="stylesheet" type="text/css" />
<link href="css/skin_0.css" rel="stylesheet" type="text/css" id="cssfile" /><!-- 引入jQuery -->
<script src="jquery-3.5.1.js" type="text/javascript"></script>
<!-- 引入jQuery.cookie库 -->
<script src="jquery.cookie.js" type="text/javascript"></script>这里要注意引用顺序。
在body标签内构造列表
<div class="container"><h1>选择颜色</h1><ul id="skin"><li id="skin_0" class="skin_0 selected" title="灰色" ></li><li id="skin_1" class="skin_1" title="紫色"></li><li id="skin_2" class="skin_2" title="红色"></li><li id="skin_3" class="skin_3" title="蓝色"></li><li id="skin_4" class="skin_4" title="橙色"></li><li id="skin_5" class="skin_5" title="绿色"></li></ul> </div>使用了有序列表来呈现用户选择的标签，用它模拟option效果。
切换样式表的JS
//<![CDATA[$(function(){var $li =$("#skin li");$li.click(function(){switchSkin( this.id );});var cookie_skin = $.cookie( "MyCssSkin");if (cookie_skin) {switchSkin( cookie_skin );}});function switchSkin(skinName){//当前<li>元素选中$("#"+skinName).addClass("selected").siblings().removeClass("selected"); //去掉其它同辈<li>元素的选中$("#cssfile").attr("href","css/"+ skinName +".css"); //设置不同皮肤$.cookie( "MyCssSkin" , skinName , { path: '/', expires: 10 }); // 记录css样式表名，并设置过期时间。}//]]>我们看一下调试：
当我们点击一个其他颜色的li以后：
本文提供的方案是经过本地服务器环境测试可用的。注意，测试需要在localhost环境测试，直接双击打开是只能测试切换功能，无法测试cookie存储的。
大功告成
其实很简单吧？路过的，喜欢的，帮我点个赞呗？！
本功能完整代码已上传，稍候通过后我来补链接。。