一个页面要显示不同的主题风格,就需要写不同的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标签
**/
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 rel="stylesheet" type="text/css" href="a.css" ty="theme">
<link rel="alternate stylesheet" type="text/css" href="b.css" title="b">
<link rel="alternate stylesheet" type="text/css" href="c.css" title="c">
<link rel="alternate stylesheet" type="text/css" href="d.css" title="d">
<link rel="alternate stylesheet" type="text/css" href="e.css" title="e">
...
之后想到的是动态的创建link标签,在添加到head中:
<head>
<meta charset="utf-8">
<title>CSS主题切换</title>
<link rel="stylesheet" type="text/css" href="a.css" title="a" ty="theme">
</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);
};