用JS实现一个页面多个css样式实现
更新时间：2008年05月29日 22:53:03 作者：
在Hello,Yang中看见的一篇文章，感觉很有用，转来这里……
第一步：在连接样式表的元素里定义一个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%
复制代码 代码如下:
<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%
相关文章
js构造函数constructor和原型prototype原理与用法实例分析
这篇文章主要介绍了js构造函数constructor和原型prototype原理与用法,结合实例形式分析js构造函数constructor和原型prototype基本原理、功能、使用方法及操作注意事项,需要的朋友可以参考下2020-03-03
Ajax 文件上传进度监听之upload.onprogress案例详解
这篇文章主要介绍了Ajax 文件上传进度监听之upload.onprogress案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-09-09
js判断鼠标同时离开两个div想了好长时间终于出炉了，下面与大家分享下具体的实现代码，感兴趣的朋友可以参考下啊2013-05-05
本文主要分享了canvas绘制表盘时钟的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧2017-01-01
本文主要介绍了js中的循环方式及各种遍历的方法，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-12-12
这篇文章主要介绍了javascript实现前端成语点击验证，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
下面是js中截取字符串经常会用到的一些函数，这里每个函数都给出了例子，学习的朋友可以参考下。2010-09-09
这篇文章主要介绍了JavaScript交换两个变量方法实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-11-11
随机展示小头像，随机数包括 位置、层级、大小、透明度 等2011-12-12
js调试工具console.log()方法查看js代码的执行情况
以往都是使用alert的方式查看js代码的执行情况，今天看到有朋友使用console.log函数打印输出函数,变量,对象,下边就console.log的使用情况进行记录2014-08-08
最新评论