一個頁面要顯示不同的主題風格，就需要寫不同的css文件；?
在做不同css文件相互切換時，首先要了解link標簽中的rel屬性；?
rel屬性值：
alternate文檔的替代版本（比如打印頁、翻譯或鏡像）。
stylesheet 文檔的外部樣式表。
start 集合中的第一個文檔。
next 集合中的下一個文檔。
prev 集合中的上一個文檔。
contents 文檔的目錄。
index 文檔的索引。
glossary 在文檔中使用的詞匯的術(shù)語表（解釋）。
copyright 包含版權(quán)信息的文檔。
chapter 文檔的章。
section 文檔的節(jié)。
subsection 文檔的小節(jié)。
appendix 文檔的附錄。
help 幫助文檔。
bookmark 相關(guān)文檔。
一般我們在頁面中引入樣式使用的屬性是stylesheet；如：?
< link rel=’stylesheet’ type=’text/css’ href=’a.cc’>?
這里我們要用到alternate屬性，用來替換css文件：?
html:
```
<!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">
</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>
```
其中第一個link標簽中的rel屬性值為stylesheet，就是當前頁面所加載顯示的css樣式文件；?
第二個alternate stylesheet就是用來做替換用的，寫在head中時不會被顯示出來，但是會重服務(wù)器中加載到瀏覽器中；?
這時候就需要寫一個javascript方法來做觸發(fā)，替換；
```
// 對切換主題的按鈕綁定事件，用來做觸發(fā)document.getElementById("sheet-a").addEventListener("click",function(){ setStyleSheet("a");
});
document.getElementById("sheet-b").addEventListener("click",function(){? ? setStyleSheet("b");
});/** * 查找所有的link標簽，找到符合條件的css進行切換 * @title:需要切換的css文件名稱，也可以是某值，主要是能夠找到所要切換的link標簽 **/functionsetStyleSheet(title){?
? ? // 首先找到DOM中所有的link標簽? ? var link_list = document.getElementsByTagName("link");
? ? if ( link_list ){
? ? ? ? for ( var i=0;i<link_list.length;i++ ){
? ? ? ? ? ? // 要找到所有l(wèi)ink中rel屬性值包括style的，也就是包括stylesheet和alternate stylesheet;? ? ? ? ? ? if ( link_list[i].getAttribute("rel").indexOf("style") != -1 ){
? ? ? ? ? ? ? ? // 將符合條件的link的disabled的屬性設(shè)為true，都改為禁用；? ? ? ? ? ? ? ? link_list[i].disabled = true;
? ? ? ? ? ? ? ? // 然后判斷l(xiāng)ink標簽中的title屬性，找到我們需要替換的css文件? ? ? ? ? ? ? ? // 找到后將該link的disabled改為啟用；? ? ? ? ? ? ? ? if ( link_list[i].getAttribute("title") === title){
? ? ? ? ? ? ? ? ? ? link_list[i].disabled = false;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? }
};
```
