随着网站个性化体验的要求不断提高，无论移动和PC 端，都会有主题切换的功能；当然切换的样式复杂度大小不同，从简单的配色切换到复杂的配色布局切换；现总结几种方案，可根据项目需求，实现复杂程度和效果体验，选择方案；
一、切换样式表引用：
编写两套样式 them1.css 、them2.css 通过js 动态切换 link 标签的属性，或追加目标主题样式表、清除现有样式表；Fixfox 浏览器可以通过浏览器切换 link 样式表，但是IE 浏览器不支持，需要手动实现
优点：简单、快捷、方便；
缺点：由于是切换引用css 文件，会由于网络原因造成加载css 文件延迟、或由于javascript 错误阻塞造成切换失败，不利于客户体验；
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>CSS主题切换</title> <link rel="stylesheet" type="text/css" href="a.css" title="a"><link rel="alternate stylesheet" type="text/css" href="b.css" title="b"><script> // 对切换主题的按钮绑定事件，用来做触发document.getElementById("sheet-a").addEventListener("click",function(){ ???setStyleSheet("a");});document.getElementById("sheet-b").addEventListener("click",function(){ ???setStyleSheet("b");});/** * 查找所有的link标签，找到符合条件的css进行切换 * @title:需要切换的css文件名称，也可以是某值，主要是能够找到所要切换的link标签 **/function setStyleSheet(title){ ?????// 首先找到DOM中所有的link标签 ???var link_list = document.getElementsByTagName("link"); ???if ( link_list ){ ???????for ( var i=0;i<link_list.length;i++ ){ ???????????// 要找到所有link中rel属性值包括style的，也就是包括stylesheet和alternate stylesheet; ???????????if ( link_list[i].getAttribute("rel").indexOf("style") != -1 ){ ???????????????// 将符合条件的link的disabled的属性设为true，都改为禁用； ???????????????link_list[i].disabled = true; ???????????????// 然后判断link标签中的title属性，找到我们需要替换的css文件 ???????????????// 找到后将该link的disabled改为启用； ???????????????if ( link_list[i].getAttribute("title") === title){ ???????????????????link_list[i].disabled = false; ???????????????} ???????????} ???????} ???}};</script></head> <body> ????<div class="main"> ???????<div class="con"> ???????????<input type="button" id="sheet-a" value="主题a" /> ???????????<input type="button" id="sheet-b" value="主题b" /> ???????</div> ???</div></body</html>
二、通多 javaScript 操作Dom Class 属性
该方式需要统一Class 的命名规则前缀or后缀，如按钮 btn-them1、btn-them2，通过javascript 控制 class
优点：响应快速、没有延迟；适用于单页面应用和局部样式切换
缺点：全局样式切换 需要全局样式添加标记、多页面的话开发量相对较大，繁琐，很难做到全站的CSS切换，只能局限在当前页上。
三、通过服务器端脚本
Asp、 Php 、Jsp 都可实现
Html主题样式切换方法
原文地址：https://www.cnblogs.com/jimbo-zhang/p/9202980.html