一個頁面要顯示不同的主題風格，就需要寫不同的css文件；
在做不同css文件相互切換時，首先要了解link標籤中的rel屬性；
rel屬性值：
alternate文檔的替代版本（比如打印頁、翻譯或鏡像）。
stylesheet 文檔的外部樣式表。
start 集合中的第一個文檔。
next 集合中的下一個文檔。
prev 集合中的上一個文檔。
contents 文檔的目錄。
index 文檔的索引。
glossary 在文檔中使用的詞彙的術語表（解釋）。
copyright 包含版權信息的文檔。
chapter 文檔的章。
section 文檔的節。
subsection 文檔的小節。
appendix 文檔的附錄。
help 幫助文檔。
bookmark 相關文檔。
一般我們在頁面中引入樣式使用的屬性是stylesheet；如：
< link rel=’stylesheet’ type=’text/css’ href=’a.cc’>
這裏我們要用到alternate屬性，用來替換css文件：
html:
其中第一個link標籤中的rel屬性值爲stylesheet，就是當前頁面所加載顯示的css樣式文件；
第二個alternate stylesheet就是用來做替換用的，寫在head中時不會被顯示出來，但是會重服務器中加載到瀏覽器中；
這時候就需要寫一個javascript方法來做觸發，替換；
// 對切換主題的按鈕綁定事件，用來做觸發
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;
}
}
}
}
};
通過以上方法，可以實現css文件切換，但是有個問題就是，如果我們所需要切換的css文件比較多怎麼辦：
如下，我們還能在head中寫許多個link標籤麼，這麼做顯然會顯得頁面很臃腫不美觀：
之後想到的是動態的創建link標籤，在添加到head中：
js:
/**
- 替換css樣式文件；
- @param title：替換的css樣式文件名稱及路徑
- auth:JYX time:2016.07.28
*/
function setStyleSheet(title){
// 找到head
var doc_head = document.head;
// 找到所有的link標籤
var link_list = document.getElementsByTagName(“link”);
if ( link_list ){
for ( var i=0;i<link_list.length;i++ ){
// 找到我們需要替換的link，
// 一般情況下有些樣式是公共樣式，我們可以寫到功能樣式文件中，不用來做替換；
// 這樣可以避免每次替換的時候樣式文件都很大；可以節省加載速度；
if ( link_list[i].getAttribute(“ty”) === “theme” ){
// 找到後將這個link標籤重head中移除
doc_head.removeChild(link_list[i]);
}
}
}
// 創建一個新link標籤
var link_style = document.createElement(“link”);
// 對link標籤中的屬性賦值
link_style.setAttribute(“rel”,“stylesheet”);
link_style.setAttribute(“type”,“text/css”);
link_style.setAttribute(“href”,title);
link_style.setAttribute(“ty”,“theme”);
// 加載到head中最後的位置
doc_head.appendChild(link_style);
};