收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 2190|回复: 2

[转载。方便收藏]用JS实现一个页面两份样式表

[复制链接]
发表于 2007-8-4 15:37:27 | 显示全部楼层 |阅读模式
今天研究了一下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%

  如果你觉得这篇文章写的不错欢迎你推荐给你的朋友
发表于 2007-8-4 15:57:47 | 显示全部楼层
不错,很简单
回复 支持 反对

使用道具 举报

发表于 2007-8-4 17:48:01 | 显示全部楼层
更换 css 的效率在大多浏览器下都比较低,推荐用 className 的方法

这是我写着玩的例子

 提示:您可以先修改部分代码再运行


[[i] 本帖最后由 gnoseux 于 2007-8-4 17:50 编辑 ]
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( ICP05002321 )  

GMT+8, 2019-11-22 17:37 , Processed in 0.093512 second(s), 9 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表