用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 相关文章推荐
别了 JavaScript中的isXX系列
Aug 01 Javascript
jquery将一个表单序列化为一个对象的方法
Dec 02 Javascript
关于原生js中bind函数的简单实现
Aug 10 Javascript
老生常谈原生JS执行环境与作用域
Nov 22 Javascript
微信小程序 底部导航栏目开发资料
Dec 05 Javascript
JavaScript登录记住密码操作(超简单代码)
Mar 22 Javascript
详解webpack中的hash、chunkhash、contenthash区别
Jan 05 Javascript
Vue表单及表单绑定方法
Sep 04 Javascript
基于Vue-cli快速搭建项目的完整步骤
Nov 03 Javascript
vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略
Jun 04 Javascript
一步一步实现Vue的响应式(对象观测)
Sep 02 Javascript
JavaScript获取时区实现过程解析
Sep 24 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 addslashes()与addclashes()函数的区别和比较
2013/06/24 PHP
php操作MongoDB基础教程(连接、新增、修改、删除、查询)
2014/03/25 PHP
在Windows XP下安装Apache+MySQL+PHP环境
2015/02/22 PHP
PHP 代码简洁之道(小结)
2019/10/16 PHP
js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
2011/03/25 Javascript
javascript学习笔记(三)显示当时时间的代码
2011/04/08 Javascript
浅谈javascript面向对象程序设计
2015/01/21 Javascript
Javascript中的getUTCDay()方法使用详解
2015/06/10 Javascript
BootStrap入门教程(三)之响应式原理
2016/09/19 Javascript
jQuery解析XML 详解及方法总结
2016/09/28 Javascript
整理关于Bootstrap过渡动画的慕课笔记
2017/03/29 Javascript
PHP7新特性简述
2017/06/11 Javascript
jQuery dateRangePicker插件使用方法详解
2017/07/28 jQuery
Vue封装Swiper实现图片轮播效果
2018/02/06 Javascript
layui radio性别单选框赋值方法
2018/08/15 Javascript
使用JS判断页面是首次被加载还是刷新
2019/05/26 Javascript
weui中的picker使用js进行动态绑定数据问题
2019/11/06 Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
2019/11/26 Javascript
JavaScript Array.flat()函数用法解析
2020/09/02 Javascript
详解Python中的元组与逻辑运算符
2015/10/13 Python
对于Python中RawString的理解介绍
2016/07/07 Python
Python Web框架之Django框架cookie和session用法分析
2019/08/16 Python
django框架forms组件用法实例详解
2019/12/10 Python
python多线程使用方法实例详解
2019/12/30 Python
win10下opencv-python特定版本手动安装与pip自动安装教程
2020/03/05 Python
如何解决安装python3.6.1失败
2020/07/01 Python
SCHIESSER荷兰官方网站:德国内衣专家
2020/10/09 全球购物
Unix/Linux开发面试题
2016/08/16 面试题
大学毕业感言50字
2014/02/07 职场文书
工商局所长四风自我剖析及整改措施
2014/10/26 职场文书
依法行政工作汇报
2014/10/28 职场文书
2014年销售人员工作总结
2014/11/27 职场文书
node.js使用express-fileupload中间件实现文件上传
2021/07/16 Javascript
react 路由Link配置详解
2021/11/11 Javascript
java代码实现空间切割
2022/01/18 Java/Android
Java中的Kotlin 内部类原理
2022/06/16 Java/Android