隨着網站個性化體驗的要求不斷提高，無論移動和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 都可實現