用JS实现一个页面两份样式表
作者:sunritz 来源:蓝色理想 发布时间:2008-07-23 12:37:00
标签:样式,js,css
今天研究了一下JS的用setAttribute方法实现一个页面两份样式表的效果,具体方法如下:
第一步:在连接样式表的元素里定义一个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%
0
投稿
猜你喜欢
- 先按照下面的表结构创建mysql_order_by_test数据表,我们用实例一点一点告诉你,MySQL order by的用法。ORDER
- 方法如下: response.cookies(cookiesname)[(key)|.attribute]=value 解释如下:cooki
- MySQL内部复制功能是建立在两个或两个以上服务器之间,通过设定它们之间的主-从关系来实现的。其中一个作为主服务器,其它的作为从服务器。本节
- 可以自动轮换的页签 tabs with auto play fucntion<html><head><meta
- 使用 Response.Redirect "aspxhome.asp" 转向方法的HTTP Status Code 为3
- 古巴比伦王颁布了汉摩拉比法典,刻在黑色的玄武岩,距今已经三千七百多年,你在橱窗前…熟悉吧?没错,这就是周董的爱在西元前歌词。前不久工作不是很
- 在Oracle 8i版本之前,使用internal用户来执行数据库的启动和关闭以及create database等操作;从8i版本以后,Or
- 当然这应该属于正常过滤手法,而还有一种过滤HTML标签的最终极手法,则是将一对尖括号及尖括号中的所有字符均替换不显示,该方法对于内容中必须描
- 一个随机排列元素的方法, 其实之前是在摄影页面写的一个小效果.查看演示: 点此查看DEMO实现方法利用Math.random()产生随机数,
- 返回首页的链接地址,有三种方法:1、一般方法是,直接写对应的域名地址,<a href="http://www.zfnn.co
- 本文介绍了使用XMlhttp技术来生成html页面,值得借鉴。相关函数:<% ’定义xmlhttp funct
- 俗话说,“工欲善其事,必先利其器”。对于前端开发工程师来说,基于Firefox丰富的Web开发辅助插件无疑就是最好的利器。下面就与大家分享2
- 对于一个内容页的文章来说,如果这个文章内容过长或是其中有分类(排行),那么进行分页阅读无疑是最好的选择。如果一个文章内容不涉及分类,比如小说
- 如何显示数据库中的图片和超级链接?代码见下:<% set conn=server.creatobject(&quo
- 方法一 :这个是我在站长工具的查询页面使用的防止频繁查询,刷新页面的代码!下面函数的功能是3秒内查询页面即刷新了页面,超过2次就提示!sea
- asp如何获知页面上的图象的实际尺寸大小?见下面的两个asp文件:<!--#include virtual="/i
- 在有些使用 javascript 来渲染数据的时候,为了能动态获取不同的数据,并且保持 javascript&
- banner 设计会严重影响广告投放效果,在此建议相关设计人员,在设计FLASH BANNER的时候考虑到以下问题.1.
- 做过主页的朋友,几乎没有一个人没用到它,它使我们排版更加轻松。有人说DW的表格没有Fp的好用,我认为不
- 代码如下:< % '功能:显示数据库中表名、字段名、字段内容 '原创:wangsdong