用JS实现一个页面多个css样式实现


Posted in Javascript onMay 29, 2008

第一步:在连接样式表的元素里定义一个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% 

Javascript 相关文章推荐
JS实现漂亮的淡蓝色滑动门效果代码
Sep 23 Javascript
jQuery多条件筛选如何实现
Nov 04 Javascript
jQuery使用$.ajax进行即时验证的方法
Dec 08 Javascript
浅析script标签中的defer与async属性
Nov 30 Javascript
过期软件破解办法实例详解
Jan 04 Javascript
JavaScript-定时器0~9抽奖系统详解(代码)
Aug 16 Javascript
Vue.js项目模板搭建图文教程
Sep 20 Javascript
vue升级之路之vue-router的使用教程
Aug 14 Javascript
layui实现checkbox的目录树tree的例子
Sep 12 Javascript
javascript操作元素的常见方法小结
Nov 13 Javascript
Servlet返回的数据js解析2种方法
Dec 12 Javascript
js实现弹窗猜数字游戏
Nov 26 Javascript
使用jquery给input和textarea设定ie中的focus
May 29 #Javascript
js中cookie的使用详细分析
May 28 #Javascript
javascript一点特殊用法
May 28 #Javascript
js 加载时自动调整图片大小
May 28 #Javascript
javascript document.images实例
May 27 #Javascript
javascript Discuz代码中的msn聊天小功能
May 25 #Javascript
常用的javascript function代码
May 23 #Javascript
You might like
实现树状结构的两种方法
2006/10/09 PHP
深入了解 register_globals (附register_globals=off 网站打不开的解决方法)
2012/06/27 PHP
php中CI操作多个数据库的代码
2012/07/05 PHP
php实现httpclient类示例
2014/04/08 PHP
PHP使用CURL_MULTI实现多线程采集的例子
2014/07/29 PHP
windows平台中配置nginx+php环境
2015/12/06 PHP
jQuery ReferenceError: $ is not defined 错误的处理办法
2013/05/10 Javascript
js打开windows上的可执行文件示例
2014/05/27 Javascript
jQuery实现dialog设置focus焦点的方法
2015/06/10 Javascript
Bootstrap Table使用方法详解
2016/08/01 Javascript
关于javascript的一些知识以及循环详解
2016/09/12 Javascript
Js利用Canvas实现图片压缩功能
2017/09/13 Javascript
Vue中mintui的field实现blur和focus事件的方法
2018/08/25 Javascript
Element UI 自定义正则表达式验证方法
2018/09/04 Javascript
vue component 中引入less文件报错 Module build failed
2019/04/17 Javascript
Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)
2020/03/11 Javascript
微信小程序实现抖音播放效果的实例代码
2020/04/11 Javascript
[03:40]2014DOTA2国际邀请赛 B神专访:躲箭真的很难
2014/07/13 DOTA
Django admin美化插件suit使用示例
2017/12/12 Python
浅谈pyqt5在QMainWindow中布局的问题
2019/06/21 Python
python 叠加等边三角形的绘制的实现
2019/08/14 Python
Python装饰器用法与知识点小结
2020/03/09 Python
HTML5头部标签的一些常用信息小结
2016/10/23 HTML / CSS
红色连衣裙精品店:Red Dress Boutique
2018/08/11 全球购物
比较基础的php面试题及答案-填空题
2014/04/26 面试题
C# .NET面试题
2015/11/28 面试题
商务英语专业求职信范文
2014/01/28 职场文书
动员大会主持词
2014/03/20 职场文书
班级读书活动总结
2014/06/30 职场文书
大学生档案自我鉴定(2篇)
2014/10/14 职场文书
个人学习群众路线心得体会
2014/11/05 职场文书
校本课程教学计划
2015/01/19 职场文书
从严治党主题教育活动总结
2015/05/07 职场文书
数据结构课程设计心得体会
2016/01/15 职场文书
Go语言应该什么情况使用指针
2021/07/25 Golang
Redis命令处理过程源码解析
2022/02/12 Redis