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 相关文章推荐
JavaScript中的条件判断语句使用详解
Jun 03 Javascript
js获取本机操作系统类型的两种方法
Dec 19 Javascript
Uploadify上传文件方法
Mar 16 Javascript
JavaScript常用本地对象小结
Mar 28 Javascript
前端弹出对话框 js实现ajax交互
Sep 09 Javascript
bootstrap监听滚动实现头部跟随滚动
Nov 08 Javascript
js实现添加删除表格(两种方法)
Apr 27 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
Nov 01 Javascript
js实现tab栏切换效果
Aug 02 Javascript
Vue $attrs &amp; inheritAttr实现button禁用效果案例
Dec 07 Vue.js
ES6中的类(Class)示例详解
Dec 09 Javascript
解决vue $http的get和post请求跨域问题
Jun 07 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使用者状态管理功能的应用
2006/10/09 PHP
打造计数器DIY三步曲(上)
2006/10/09 PHP
php列出一个目录下的所有文件的代码
2012/10/09 PHP
PHP中创建图像并绘制文字的例子
2014/11/19 PHP
yii实现CheckBox复选框在同一行显示的方法
2014/12/03 PHP
php魔术方法功能与用法实例分析
2016/10/19 PHP
利用Laravel事件系统如何实现登录日志的记录详解
2017/05/20 PHP
PHP+iframe模拟Ajax上传文件功能示例
2019/07/02 PHP
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
2007/04/12 Javascript
javascript实现动态CSS换肤技术的脚本
2007/06/29 Javascript
php和js对数据库图片进行等比缩放示例
2014/04/28 Javascript
JavaScript实现信用卡校验方法
2015/04/07 Javascript
深入理解bootstrap框架之入门准备
2016/10/09 Javascript
微信小程序入门教程
2016/11/18 Javascript
domReady的实现案例
2016/11/23 Javascript
使用InstantClick.js让页面提前加载200ms
2017/09/12 Javascript
vue-router动态设置页面title的实例讲解
2018/08/30 Javascript
JavaScript创建对象方法实例小结
2018/09/03 Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
2020/08/31 Javascript
一个基于flask的web应用诞生 使用模板引擎和表单插件(2)
2017/04/11 Python
大家都说好用的Python命令行库click的使用
2019/11/07 Python
基于Python中isfile函数和isdir函数使用详解
2019/11/29 Python
Django 项目布局方法(值得推荐)
2020/03/22 Python
英国最大的老式糖果店:A Quarter Of
2017/04/08 全球购物
严选全球尖货,立足香港:Bonpont宝盆
2018/07/24 全球购物
英国最好的温室之家:Greenhouses Direct
2019/07/13 全球购物
清明节扫墓活动方案
2014/03/02 职场文书
党风廉政承诺书
2014/03/27 职场文书
学生社团文化节开幕式主持词
2014/03/28 职场文书
竞选大队长演讲稿
2014/04/29 职场文书
乡镇平安建设汇报材料
2014/08/25 职场文书
领导干部群众路线剖析材料
2014/10/09 职场文书
2014年打非治违工作总结
2014/11/13 职场文书
网络舆情信息简报
2015/07/21 职场文书
Java数组与堆栈相关知识总结
2021/06/29 Java/Android
使用pd.merge表连接出现多余行的问题解决
2022/06/16 Python