用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 相关文章推荐
Mootools 1.2教程(3) 数组使用简介
Sep 14 Javascript
JS 屏蔽键盘不可用与鼠标右键不可用的方法
Nov 18 Javascript
js中精确计算加法和减法示例
Mar 28 Javascript
jquery实现公告翻滚效果
Feb 27 Javascript
分享javascript计算时间差的示例代码
Mar 19 Javascript
JavaScript中自带的 reduce()方法使用示例详解
Aug 10 Javascript
jQuery实现的小图列表,大图展示效果幻灯片示例
Oct 25 Javascript
js判断数组是否包含某个字符串变量的实例
Nov 24 Javascript
使用vue-aplayer插件时出现的问题的解决
Mar 02 Javascript
解决vue 路由变化页面数据不刷新的问题
Mar 13 Javascript
基于vue.js中关于下拉框的值默认及绑定问题
Aug 22 Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
Nov 05 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
PHP四大安全策略
2014/03/12 PHP
PHP简单实现“相关文章推荐”功能的方法
2014/07/19 PHP
PHP实现的进度条效果详解
2016/05/03 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
用脚本调用样式的几种方法
2006/12/09 Javascript
JavaScript 计算当天是本年本月的第几周
2009/03/22 Javascript
js自执行函数的几种不同写法的比较
2012/08/16 Javascript
js获取URL的参数的方法(getQueryString)示例
2013/09/29 Javascript
一个网页标题title的闪动提示效果实现思路
2014/03/22 Javascript
jQuery 隐藏和显示 input 默认值示例
2014/06/03 Javascript
jQuery新的事件绑定机制on()示例应用
2014/07/18 Javascript
jQuery仿Flash上下翻动的中英文导航菜单实例
2015/03/10 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
2016/04/17 Javascript
jQuery实现上传图片前预览效果功能
2017/08/03 jQuery
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
2017/09/20 Javascript
解决Vue axios post请求,后台获取不到数据的问题方法
2018/08/11 Javascript
一次Webpack配置文件的分离实战记录
2018/11/30 Javascript
深入浅出vue图片路径的实现
2019/09/04 Javascript
解决layer 动态加载select 失效的问题
2019/09/18 Javascript
python生成器的使用方法
2013/11/21 Python
python Django框架实现自定义表单提交
2016/03/25 Python
python3实现字符串的全排列的方法(无重复字符)
2018/07/07 Python
解决torch.autograd.backward中的参数问题
2020/01/07 Python
Python random库使用方法及异常处理方案
2020/03/02 Python
简单了解python调用其他脚本方法实例
2020/03/26 Python
pytorch中 gpu与gpu、gpu与cpu 在load时相互转化操作
2020/05/25 Python
Python 在局部变量域中执行代码
2020/08/07 Python
浅谈matplotlib默认字体设置探索
2021/02/03 Python
世界上最大的曲棍球商店:Pro Hockey Life
2017/10/30 全球购物
在阿尔卑斯山或希腊度过快乐假期:Alpine Elements
2019/12/28 全球购物
适用于所有创业者的创业计划书
2014/02/05 职场文书
大专生毕业的自我评价
2014/02/06 职场文书
法人代表授权委托书
2014/04/08 职场文书
胡雪岩故居导游词
2015/02/06 职场文书
2016年第二十五次全国助残日活动总结
2016/04/01 职场文书
前端监听websocket消息并实时弹出(实例代码)
2021/11/27 Javascript