一个页面要显示不同的主题风格，就需要写不同的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);
};
