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完美拖拽,可返回拖动轨迹
Mar 29 Javascript
jQuery 插件仿百度搜索框智能提示(带Value值)
Jan 22 Javascript
select、radio表单回显功能实现避免使用jquery载入赋值
Jun 08 Javascript
jQuery Trim去除字符串首尾空字符的实现方法说明
Feb 11 Javascript
js不能获取隐藏的div的宽度只能先显示后获取
Sep 04 Javascript
Javascript快速排序算法详解
Dec 03 Javascript
JavaScript实现的简单拖拽效果
Jun 01 Javascript
JS实现的车标图片提示效果代码
Oct 10 Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
本地搭建微信小程序服务器的实现方法
Oct 27 Javascript
解决layUI的页面显示不全的问题
Sep 20 Javascript
通过实例解析JavaScript for in及for of区别
Jun 15 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
整理的一些实用WordPress后台MySQL操作命令
2013/01/07 PHP
PHP 读取Postgresql中的数组
2013/04/14 PHP
yii2实现根据时间搜索的方法
2016/05/25 PHP
JS+PHP实现用户输入数字后显示最大的值及所在位置
2017/06/19 PHP
PHP实现打包下载文件的方法示例
2017/10/07 PHP
laravel model模型定义实现开启自动管理时间created_at,updated_at
2019/10/17 PHP
JS 学习笔记 防止发生命名冲突
2009/07/30 Javascript
javascript移动设备Web开发中对touch事件的封装实例
2014/06/05 Javascript
浅谈javascript 迭代方法
2015/01/21 Javascript
flash+jQuery实现可关闭及重复播放的压顶广告
2015/04/15 Javascript
jquery实现叠层3D文字特效代码分享
2015/08/21 Javascript
详解AngularJS中自定义过滤器
2015/12/28 Javascript
jQuery实现最简单实用的分秒倒计时
2017/02/05 Javascript
jquery.uploadView 实现图片预览上传功能
2017/08/10 jQuery
jQuery实现动态控制页面元素的方法分析
2017/12/20 jQuery
JavaScript中Object基础内部方法图
2018/02/05 Javascript
微信小程序实现锚点功能
2019/11/20 Javascript
Vue Router的手写实现方法实现
2020/03/02 Javascript
微信小程序实现简单购物车功能
2020/12/30 Javascript
[04:41]2014DOTA2国际邀请赛 Liquid顺利突围晋级正赛
2014/07/09 DOTA
[02:57]DOTA2亚洲邀请赛小组赛第四日 赛事回顾
2015/02/02 DOTA
Python调用C++程序的方法详解
2017/01/24 Python
使用pandas对矢量化数据进行替换处理的方法
2018/04/11 Python
selenium+python 对输入框的输入处理方法
2018/10/11 Python
详解Python3 pandas.merge用法
2019/09/05 Python
pandas实现excel中的数据透视表和Vlookup函数功能代码
2020/02/14 Python
Python中有几个关键字
2020/06/04 Python
Subside Sports德国:足球球衣和球迷商品
2019/06/08 全球购物
介绍一下linux的文件权限
2014/07/20 面试题
成龙霸王洗发水广告词
2014/03/14 职场文书
企业消防安全责任书
2014/07/23 职场文书
村党建工作汇报材料
2014/11/02 职场文书
城南旧事电影观后感
2015/06/16 职场文书
2015年大学迎新晚会总结
2015/07/16 职场文书
GO语言异常处理分析 err接口及defer延迟
2022/04/14 Golang
Windows Server 版本 20H2 于 8 月 9 日停止支持,Win10 版本 21H1 将于 12 月结束支
2022/07/23 数码科技