您的位置：首页 > Web前端 > JavaScript

javascript实现css主题样式切换;动态改变引入的css文件；

2016-07-28 16:56 1231 查看
一个页面要显示不同的主题风格，就需要写不同的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&g
c150
t;
<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);
};
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript
相关文章推荐
新的分享
章节导航