JS实现CSS风格选择器 |
 |  Date:2008-06-19 |  View:5411本站LOGO下边有两个小按钮，可以用来控制边栏的布局效果，这个就是CSS选择器，用一段JS控制，当你点击链接，JS就会判断你所选择的CSS效果，让相应CSS文件生效，达到风格切换的效果，并且JS会将你的选择保存到COOKIE，保证你在刷新后还能看到自己选择的风格。 现在我把这段JS提供给大家，并做一个简单教程，以便于你可以把这个小功能使用到自己的站上，提高自己网站的用户体验。
2 将JS文件链接到网站的head区域，方法是在源码中 </head>前面添加下面的代码：
<script type="text/javascript" src="styleswitcher.js" mce_src="styleswitcher.js"></script>
3设置你的默认风格：
<link rel=”stylesheet” type=”text/css” href=”yourdefaultstyle.css” title=”default” />
4设置你的备选风格：
<link rel=”alternate stylesheet” disabled type=”text/css” href=”youralternatestyle.css.css” title=”alternate” />
5在页面上需要的地方增加风格选择按钮：
<a href=”#" onclick=”setActiveStyleSheet(‘default’); return false;”>切换到默认风格</a>
<a href=”#" onclick=”setActiveStyleSheet(‘alternate’); return false;”>切换到备选风格</a> 到这里你的风格选择器应该可以使用了，当然备选风格可以设置多个，主要通过title区别。这里再提供一个演示静态页给你做一个参考：点击下载 其实火狐浏览器里如果你用rel="alternate stylesheet"设置过备选风格，就可以通过菜单：查看>页面风格里选择风格，不过这个没有COOKIE，一刷新页面又会变成默认风格，最关键的还是IE不支持这个属性，这个JS很好的解决了这些问题。 好了，快点动手让自己的网站也可以随时变脸吧！  设计 CSS风格选择器 Newer Articles
Older Articles
网摘: 
.text:''):(d.getSelection?d.getSelection():'');void(keyit=window.open('http://my.poco.cn/fav/storeIt.php?t='+escape(d.title)+'&u='+escape(d.location.href)+'&c='+escape(t)+'&img=http://www.h-strong.com/blog/logo.gif','keyit','scrollbars=no,width=475,height=575,status=no,resizable=yes'));keyit.focus();){kind=logo}
发表评论
|
||||||||||||||||||||||||||||||||||||||||||
半吊子 路过学习
| Smashing Magazine风格转换器比赛结果出笼！ < 上一篇 | 下一篇 > 有衬线字体与无衬线字体(serif vs sans serif) |
|---|
