JS控制切换CSS文件实现网站多主题风格无刷新切换


看到过很多网站都有一个暗黑模式之类的多主体切换,然后我就想着自己要不要弄一个暗黑模式。当然了,也不仅仅局限于暗黑模式,你可以自定义这些风格。理论上来说,只要你不嫌弃麻烦,你可以弄无限个风格来进行切换。

其实实现起来并不是很难,因为就是实时切换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>

后话:

这样就完成了多主题风格的切换,只要你有心情,你可以制作很多个主题来供访客切换,理论上来讲是无限制的。而且主题文件也不需要重新再写一遍,只需要将我们需要更改的元素写入到主题文件内就行了,具体的大家可以下载演示文件,然后看一下我是怎么写的就明白了了。

演示文件下载

点击高速下载



版权声明

本文作者 软软软三岁哟 / 文章来源: 少司命博客

本文链接https://www.shaosiming.net/jskz/javascript/31.html

转载分享:如果你要转载或者分享本篇文章,请注明作者/出处以及原文链接即可!

侵权行为:如果文章内容侵犯了您的权益,还请麻烦来信告知删除内容。


发表评论

检测到您还未登录,需要登录后才能发表评论!

注册 or 登录

文章评论 0 条评论,你也快来参与吧!

还没有评论呢~快来一鸣惊人吧!

博主业务范围

- Job requirements accepted by bloggers -

img

- 网站建设 -

提供一站式建站服务
服务器/域名/程序/备案全包

联系博主
img

- 布局调整 -

优化CSS构架布局
主要针对前端页面美化

联系博主
img

- 模板制作 -

图转HTML/仿站/原创
支持套入市场主流程序

联系博主
img

- 定制服务 -

提供私人专项定制服务
疑难杂症问题解决

联系博主