一个页面要显示不同的主题风格，就需要写不同的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:
```
<!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中时不会被显示出来，但是会重服务器中加载到浏览器中；
这时候就需要写一个javascript方法来做触发，替换；
```
// 对切换主题的按钮绑定事件，用来做触发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++ ){
// 要找到所有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;
}
}
}
}
};
```
网友评论