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 弹出层注册页面等(asp.net后台)
Jun 17 Javascript
jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
Jun 28 Javascript
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
Jan 29 Javascript
Javascript中3个需要注意的运算符
Apr 02 Javascript
jQuery中ScrollTo用法示例
Sep 04 Javascript
jQuery树形插件jquery.simpleTree.js用法分析
Sep 05 Javascript
PHP抓取HTTPS内容和错误处理的方法
Sep 30 Javascript
如何使用angularJs
May 08 Javascript
js 奇葩技巧之隐藏代码
Aug 11 Javascript
Angular 组件之间的交互的示例代码
Mar 24 Javascript
vue 注册组件的使用详解
May 05 Javascript
微信小程序获取公众号文章列表及显示文章的示例代码
Mar 10 Javascript
获取内联和链接中的样式(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 编程请选择正确的文本编辑软件
2006/12/21 PHP
PHP编程过程中需要了解的this,self,parent的区别
2009/12/30 PHP
php数据结构与算法(PHP描述) 快速排序 quick sort
2012/06/21 PHP
PHP获取文件相对路径的方法
2015/02/26 PHP
php动态绑定变量的用法
2015/06/16 PHP
PHP常用的小程序代码段
2015/11/14 PHP
php提供实现反射的方法和实例代码
2019/09/17 PHP
Javascript入门学习资料收集整理篇
2008/07/06 Javascript
IE8 中使用加速器(Activities)
2010/05/14 Javascript
再论Javascript下字符串连接的性能
2011/03/05 Javascript
js汉字转拼音实现代码
2013/02/06 Javascript
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
2013/02/22 Javascript
基于JavaScript实现通用tab选项卡(通用性强)
2016/01/07 Javascript
JavaScript实现打开链接页面的方式汇总
2016/06/02 Javascript
浅谈js中子页面父页面方法 变量相互调用
2016/08/04 Javascript
微信小程序 wxapp内容组件 progress详细介绍
2016/10/31 Javascript
javascript读取文本节点方法小结
2016/12/15 Javascript
JavaScript对象引用与赋值实例详解
2017/03/15 Javascript
JS 实现百度搜索功能
2018/02/01 Javascript
angular中子控制器向父控制器传值的实例
2018/10/08 Javascript
微信小程序实现单选功能
2018/10/30 Javascript
在vue中使用vant TreeSelect分类选择组件操作
2020/11/02 Javascript
尝试使用Python多线程抓取代理服务器IP地址的示例
2015/11/09 Python
Python3按一定数据位数格式处理bin文件的方法
2019/01/24 Python
Python集中化管理平台Ansible介绍与YAML简介
2019/06/12 Python
Python高级特性——详解多维数组切片(Slice)
2019/11/26 Python
利用python生成照片墙的示例代码
2020/04/09 Python
Luxplus荷兰:以会员价购买美容产品等,独家优惠
2019/08/30 全球购物
C++是不是类型安全的
2014/02/18 面试题
实习生自我鉴定
2013/12/12 职场文书
机械设计及其自动化专业求职信
2014/06/09 职场文书
校庆标语集锦
2014/06/25 职场文书
2015年勤工助学工作总结
2015/04/29 职场文书
2015年检验员工作总结范文
2015/04/30 职场文书
高中语文教学反思范文
2016/02/16 职场文书
JavaWeb实现显示mysql数据库数据
2022/03/19 Java/Android