js实现单一html页面两套css切换代码


Posted in Javascript onApril 11, 2013

今天研究了一下JS的用setAttribute方法实现一个页面两份样式表的效果,具体方法如下:
第一步:在连接样式表的元素里定义一个id,例如

<link href=”1.css” rel=”stylesheet” type=”text/css” id=”css”>

我定义的id是css。
第二步:写一个js函数,代码如下:
<script type=”text/javascript”> 
function change(a){ 
var css=document.getElementById(“css”); 
if (a==1) 
css.setAttribute(“href”,”1.css”); 
if (a==2) 
css.setAttribute(“href”,”2.css”); 
} 
</script>

这个函数的code可以放在页面的任何地方。
第三步:为改变页面的样式表的连接添加一个函数的触发事件,代码如下:
<a href=”#” onClick=”change(1)”>1.css</a> 
<a href=”#” onClick=”change(2)”>2.css</a>

该效果在IE和FF下均测试通过,相信大家看完后因该非常明了,利用这个方法我们可以让浏览者自己选择需要显示的样式表,比如年老者可以选择一个字体较大的样式表。这里需要注意的两点是:
在这个例子中函数名function后面的名字不能为links或者link,如果为links或者link,样式表将不被改变,具体什么原因我也不大清楚,可能是javascript的保留字符。
另外如果是改变整个页面的样式,你需要在样式表文件里定义body的高度为100%

方法二:
第一步:导入两套css文件

<link rel="stylesheet" type="text/css" title="样式A" href="css/people1.css" /> 
<link rel="alternate stylesheet" type="text/css" title="样式B" href="css/people2.css" />

第二步:写切换的js函数
<script type="text/javascript"> 
var title = "样式A"; 
function setStyle(){ //只是样式A 和样式B切换 
if(title=="样式A"){ 
title = "样式B"; 
}else{ 
title = "样式A"; 
} 
var i,links; 
//用dom方法获取所有link元素 
links = document.getElementsByTagName("link"); 
//判断每个link元素中是否含有style字符串 ,用来判断此link元素为样式表link ,同时判断此link是否包含title属性 
for(i=0; links[i]; i++){ 
if(links[i].getAttribute("rel").indexOf("style") != -1 && links[i].getAttribute("title")){ 
//把所有link设为disabled 
links[i].disabled = true; 
//再来判断title中是否有指定的title字符串 有则把当前的link设为可视 即激活当前的link 
if(links[i].getAttribute("title").indexOf(title) != -1){ 
links[i].disabled = false; 
//alert("ok"); 
} 
} 
} 
} 
</script>

第三步:在html标签中调用切换的js函数
<a href="#" onclick="setStyle();" >1</a> 
<a href="#" onclick="setStyle();">2</a> 
<a href="#" onclick="setStyle();">3</a> 
<a href="#" onclick="setStyle();">4</a> 
<a href="#" onclick="setStyle();">5</a>
Javascript 相关文章推荐
jquery Firefox3.5中操作select的问题
Jul 10 Javascript
jQuery当鼠标悬停时放大图片的效果实例
Jul 03 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
Oct 24 Javascript
JS验证邮箱格式是否正确的代码
Dec 05 Javascript
浅析Node在构建超媒体API中的作用
Jul 30 Javascript
jQuery中ajax的load()与post()方法实例详解
Jan 05 Javascript
jQuery扩展_动力节点Java学院整理
Jul 05 jQuery
详解如何提升JSON.stringify()的性能
Jun 12 Javascript
wx-charts 微信小程序图表插件的具体使用
Aug 18 Javascript
vue-cli和v-charts实现可视化图表过程解析
Oct 08 Javascript
vue element自定义表单验证请求后端接口验证
Dec 11 Javascript
vue中的可拖拽宽度div的实现示例
Apr 08 Vue.js
获取内联和链接中的样式(js代码)
Apr 11 #Javascript
JavaScript在XHTML中的用法详解
Apr 11 #Javascript
JavaScript中的noscript元素属性位置及作用介绍
Apr 11 #Javascript
javascript标签在页面中的位置探讨
Apr 11 #Javascript
JS添加删除一组文本框并对输入信息加以验证判断其正确性
Apr 11 #Javascript
如何使用json在前后台进行数据传输实例介绍
Apr 11 #Javascript
在javascript中对于DOM的加强
Apr 11 #Javascript
You might like
php截取字符串并保留完整xml标签的函数代码
2013/02/06 PHP
利用curl 多线程 模拟 并发的详解
2013/06/14 PHP
Zend Studio 实用快捷键一览表(精心整理)
2013/08/10 PHP
php之Smarty模板使用方法示例详解
2014/07/08 PHP
php获得文件大小和文件创建时间的方法
2015/03/13 PHP
Yii净化器CHtmlPurifier用法示例(过滤不良代码)
2016/07/15 PHP
phalcon model在插入或更新时会自动验证非空字段的解决办法
2016/12/29 PHP
PHP架构及原理知识点详解
2019/12/22 PHP
Javascript的IE和Firefox兼容性汇编
2006/07/01 Javascript
jQuery学习基础知识小结
2010/11/25 Javascript
Js日期选择自动填充到输入框(界面漂亮兼容火狐)
2013/08/02 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
2015/09/14 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
2015/11/02 Javascript
基于javascript实现图片左右切换效果
2016/01/25 Javascript
jQuery实现邮箱下拉列表自动补全功能
2016/09/08 Javascript
微信小程序 教程之事件
2016/10/18 Javascript
JS碰撞运动实现方法详解
2016/12/15 Javascript
NodeJS处理Express中异步错误
2017/03/26 NodeJs
使用mint-ui实现省市区三级联动效果的示例代码
2018/02/09 Javascript
前端js中的事件循环eventloop机制详解
2019/05/15 Javascript
Python的Django框架中的数据库配置指南
2015/07/17 Python
dataframe设置两个条件取值的实例
2018/04/12 Python
Python调用钉钉自定义机器人的实现
2020/01/03 Python
pytorch 准备、训练和测试自己的图片数据的方法
2020/01/10 Python
python 截取XML中bndbox的坐标中的图像,另存为jpg的实例
2020/03/10 Python
Python 字典中的所有方法及用法
2020/06/10 Python
pandas map(),apply(),applymap()区别解析
2021/02/24 Python
精细化工应届生求职信
2013/11/17 职场文书
《飞向蓝天的恐龙》教学反思
2014/04/09 职场文书
中学生评语大全
2014/04/18 职场文书
会计人员演讲稿
2014/09/11 职场文书
代领学位证书毕业证书委托书
2014/09/30 职场文书
争先创优个人总结
2015/03/04 职场文书
升职自荐信范文
2015/03/27 职场文书
php中pcntl_fork详解
2021/04/01 PHP
解决ObjectMapper.convertValue() 遇到的一些问题
2021/06/30 Java/Android