无刷新更新CSS样式

大 | 中 | 小
[不指定 2008/08/06 17:58 | by TigerHood ]
步骤1. -->
下载styleswitcher.rar 解压出的js放入你需要的目录里, 并在<head>加上
<script type="text/javascript" src="（目标路径）styleswitcher.js"></script>

步骤2. -->
将欲加入的css style 依次列进<head>
第一行stylesheet 为预设的style, 其它alternate stylesheet 为选项style, 然后自定title 名称(如以下蓝字)

<link rel="stylesheet" type="text/css" href="css/index01.css" title="green">
<link rel="alternate stylesheet" type="text/css" href="css/index02.css" title="yellow">
<link rel="alternate stylesheet" type="text/css" href="css/index03.css" title="purple">

步骤3. -->
内容html选项的写法如下, 以下的红字部分需逐一对应步骤2的蓝字才能趋动所命名的style

更换页面风格 :
<a href="css/index01.css" onclick="setActiveStyleSheet('green'); return false;">绿色</a>
<a href="css/index02.css" onclick="setActiveStyleSheet('yellow'); return false;">褐色</a>
<a href="css/index03.css" onclick="setActiveStyleSheet('purple'); return false;">紫色</a>

虽然有预设的style, 但因为js中有 Cookie 写法, 下次再开启时会以上次最后设定的style为当前style。
Tags: ,
技巧：事半功倍 | 评论(0) | 引用(0) | 阅读(136)
收藏到：
雅虎收藏夹
百度收藏
书签
新浪ViVi
搜狐网摘
365Key网摘
天极网摘
和讯网摘
网摘
网络书签
博拉网
天下图摘
发表评论
表情
emotemotemotemot
emotemotemotemot
emotemotemotemot
emotemotemotemot
emotemotemotemot
打开HTML
打开UBB
打开表情
隐藏
昵称   密码   游客无需密码
网址   电邮   [注册]
               

验证码 不区分大小写