<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网站多主题切换演示 - 少司命个人博客</title>
<link rel="stylesheet" href="style.css">
<!-- 默认的CSS，一定要引用在其他主题前，否则无法覆盖 -->
<script src="theme.js"></script>
<!-- 主题文件，如果你不想写JS里面也可以直接引入，但是写进JS文件比较美观，如果主题较多，就要引入一大堆CSS文件 -->
<!-- <link rel="stylesheet" type="text/css" href="css/1.css" title="CSS1" id="CSS1" disabled>
<link rel="stylesheet" type="text/css" href="css/2.css" title="CSS2" id="CSS2" disabled>
<link rel="stylesheet" type="text/css" href="css/3.css" title="CSS3" id="CSS3" disabled> -->
<!--
需要注意的是，引入的 title 和 id 必须和下面JS代码的大小写对应，如果下面是小写，引入就要小写
而且引入文件的最后一定要加入 disabled 禁用属性！默认就不加载主题文件，只有通过你点击请求才会加载
-->
</head>
<body>
<div class="demo">
<h1>可以在这里切换主题</h1>
<ul>
<li><a href="javascript:changeCss()">默认</a></li>
<li><a href="javascript:changeCss(1)">红色</a></li>
<li><a href="javascript:changeCss(2)">蓝色</a></li>
<li><a href="javascript:changeCss(3)">橙色</a></li>
</ul>
<p>少司命个人博客_一个热爱前端,热爱游戏,热爱生活的妹子！</p>
</div>
<script>
// 切换主题需要用到JS代码
function changeCss(id) {
for (var i = 1; i < 5; i++) {
if (i == id)
document.getElementById("CSS" + i).disabled = false; // 需要注意大小写，这里是大写，引入的文件也要大写
else
document.getElementById("CSS" + i).disabled = true; // 需要注意大小写，这里是大写，引入的文件也要大写
}
}
</script>
</body>
</html>
cookie使用document.cookie='name=value;path=/'就可以。但是如果你是想保存配置的主题信息，建议使用localStorage。