看到过很多网站都有一个暗黑模式之类的多主体切换,然后我就想着自己要不要弄一个暗黑模式。当然了,也不仅仅局限于暗黑模式,你可以自定义这些风格。理论上来说,只要你不嫌弃麻烦,你可以弄无限个风格来进行切换。
其实实现起来并不是很难,因为就是实时切换CSS文件来覆盖掉默认的样式罢了。能实现这一功能的方法也很多,但是我感觉有很多比较麻烦的,那我今天就来给大家带来一个最简单的办法吧!
简单的demo演示
https://demo.shaosiming.net/theme/index.html
代码部分
第一步:先将我们的主题CSS文件引入到head头部内
<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 禁用属性!默认就不加载主题文件,只有通过你点击请求才会加载 -->
第二步:将以下JavaScript代码加入到你的网页当中
<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>
第三步:提供一个切换主题的入口
<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>
后话:
这样就完成了多主题风格的切换,只要你有心情,你可以制作很多个主题来供访客切换,理论上来讲是无限制的。而且主题文件也不需要重新再写一遍,只需要将我们需要更改的元素写入到主题文件内就行了,具体的大家可以下载演示文件,然后看一下我是怎么写的就明白了了。
演示文件下载
-
-
下一篇:已经是最后一篇
还没有评论呢~快来一鸣惊人吧!
发表评论
检测到您还未登录,需要登录后才能发表评论!
注册 or 登录