用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 相关文章推荐
Prototype中dom对象方法汇总
Sep 17 Javascript
JS 跳转页面延迟2种方法
Mar 29 Javascript
Jquery 动态生成表格示例代码
Dec 24 Javascript
JavaSacript中charCodeAt()方法的使用详解
Jun 05 Javascript
深入理解JavaScript中的并行处理
Sep 22 Javascript
基本DOM节点操作
Jan 17 Javascript
AngularJS实现注册表单验证功能
Oct 16 Javascript
AngularJS实现自定义指令及指令配置项的方法
Nov 20 Javascript
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
Aug 24 Javascript
微信小程序tabBar 返回tabBar不刷新页面
Jul 25 Javascript
Vue中添加滚动事件设置的方法详解
Sep 14 Javascript
JavaScript数组reduce()方法的语法与实例解析
Jul 07 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中{}大括号是什么意思
2013/12/01 PHP
PHP_NETWORK_GETADDRESSES: GETADDRINFO FAILED问题解决办法
2014/05/04 PHP
YII Framework框架教程之日志用法详解
2016/03/14 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
详解Laravel设置多态关系模型别名的方式
2019/10/17 PHP
用js脚本控制asp.net下treeview的NodeCheck的实现代码
2010/03/02 Javascript
JQUBAR1.1 jQuery 柱状图插件发布
2010/11/28 Javascript
jQuery操作表格(table)的常用方法、技巧汇总
2014/04/12 Javascript
Bootstrap Chart组件使用教程
2016/04/28 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
2016/10/29 Javascript
JS获取多维数组中相同键的值实现方法示例
2017/01/06 Javascript
JavaScript实现反转字符串的方法详解
2017/04/27 Javascript
详解ionic本地相册、拍照、裁剪、上传(单图完全版)
2017/10/10 Javascript
详解vue-cli脚手架build目录中的dev-server.js配置文件
2017/11/24 Javascript
微信小程序dom操作的替代思路实例分析
2018/12/06 Javascript
Vue Render函数创建DOM节点代码实例
2020/07/08 Javascript
使用Vue-cli 中为单独页面设置背景图片铺满全屏
2020/07/17 Javascript
Vue中添加滚动事件设置的方法详解
2020/09/14 Javascript
深入flask之异步非堵塞实现代码示例
2018/07/31 Python
OpenCV3.0+Python3.6实现特定颜色的物体追踪
2019/07/23 Python
利用ImageAI库只需几行python代码实现目标检测
2019/08/09 Python
Python使用Beautiful Soup爬取豆瓣音乐排行榜过程解析
2019/08/15 Python
Python文件操作模拟用户登陆代码实例
2020/06/09 Python
python实现MySQL指定表增量同步数据到clickhouse的脚本
2021/02/26 Python
html5定位获取当前位置并在百度地图上显示
2014/08/22 HTML / CSS
Monnier Freres中文官网:法国领先的奢侈品配饰在线零售商
2017/11/01 全球购物
波兰最早的运动鞋精品店之一:Street Supply
2019/08/29 全球购物
几个Linux面试题笔试题
2016/08/01 面试题
我们没有写servlet的构造方法,那么容器是怎么创建servlet的实例呢
2013/04/24 面试题
房地产营销策划方案
2014/02/08 职场文书
《一件运动衫》教学反思
2014/02/19 职场文书
静心口服夜广告词
2014/03/20 职场文书
大学班级学风建设方案
2014/05/01 职场文书
日语专业毕业生自荐书
2014/06/18 职场文书
蓬莱阁导游词
2015/02/04 职场文书
ant design vue的form表单取值方法
2022/06/01 Vue.js