创星网络[分享知识传递快乐] › 门户 ›网页编程语言› HTML/CSS› CSS › 查看内容

轻松实现CSS样式实时切换技巧

2012-8-8 10:10| 发布者: cryinglily| 查看: 383| 评论: 0|原作者: luinstein

摘要: 你对CSS样式实时切换的概念和用法是否了解，这里和大家分享一下，用W3C标准建造的网站，从理论上来说可以做到完全的表现与结构相分离。打个比方，就是可以在不动骨架（结构，XHMTL）和肌肉（行为，Javascript）的前 ...

你对CSS样式实时切换的概念和用法是否了解，这里和大家分享一下，用W3C标准建造的网站，从理论上来说可以做到完全的表现与结构相分离。打个比方，就是可以在不动骨架（结构，XHMTL）和肌肉（行为，Javascript）的前提下，彻彻底底地换一身皮（表现，CSS）。
  实现CSS样式实时切换
  用W3C标准建造的网站，从理论上来说可以做到完全的表现与结构相分离。打个比方，就是可以在不动骨架（结构，XHMTL）和肌肉（行为，Javascript）的前提下，彻彻底底地换一身皮（表现，CSS）。
  当然，换皮之前你需要先按W3C标准建好你的网站，并且为它准备两套表现不一样的CSS。“换皮”实质上就是“换CSS”，我们要做的，只是用某种方法让浏览器载入另一套CSS，重新渲染页面。
  Javascript方法
  可以用Javascript的DOM方法访问link对象，再将不需要的CSS设为“禁用（disabled）”，剩下的CSS就会被浏览器用来渲染页面。脚本如下，请注意其中的注释：
  然后在合适的地方调用这个函数，以本页为例，添加如下两个按钮：

<inputtypeinputtype="button"value="清光"
onclick="setStyle('清光');"/>
<inputtypeinputtype="button"value="冥焰"onclick="setStyle('冥焰');"/>

复制代码

使用Javascript的好处是方便、快捷、简单，缺点也是很明显的：很难做到全站的CSS切换，只能局限在当前页上。为了记忆用户的选择，可行的方案就是采用cookie。可是就算使用cookie，也需要在何时载入CSS，用户没有Javasciprt支持怎么办等问题上多做好些文章。

原文:http://developer.51cto.com/art/201009/223923.htm

鲜花

握手

雷人

路过

鸡蛋

收藏分享邀请

		自动登录	找回密码
密码			立即注册

轻松实现CSS样式实时切换技巧

相关分类