当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JS版网站风格切换实例代码

Javascript
QQ邮箱的一个文本编辑器代码
Z-Blog中用到的js代码
绝对经典的滑轮新闻显示(javascript+css)实现
用js实现的仿sohu博客更换页面风格(简单版)
仿Vista进程条效果
用Javascript判断图片是否存在,不存在则显示默认图片的代码
用JQuery 实现的自定义对话框
jQuery使用手册之三 CSS操作
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
贴图转换+转贴工具用到的js代码超级推荐
超级简单的图片防盗(HTML),好用
现代 javscript 编程 资料
超级可爱纯js网页时钟
Dojo之路:如何利用Dojo实现Drag and Drop效果
AJAX架构之Dojo篇
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
使用prototype.js 的时候应该特别注意的几个问题.
一个已封装好的漂亮进度条
漂亮的widgets,支持换肤和后期开发新皮肤
用javascript实现的仿Flash广告图片轮换效果

Javascript 中的 JS版网站风格切换实例代码


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-12   浏览: 126 ::
收藏到网摘: n/a

这个网站风格切换除了带记忆功能外,还可设定保持时间,比如5天-180天,过了时间就自动恢复到默认样式表。 样式表连接,设3种风格,把你要改变的图片背景等写入样式表。
复制代码 代码如下:

<link media="screen" href="/css/default.css" rel="stylesheet" type="text/css" title="default" />
<link media="screen" href="/css/blue.css" rel="alternate stylesheet" type="text/css" title="blue" />
<link media="screen" href="/css/orange.css" rel="alternate stylesheet" type="text/css" title="orange" />

第一个是默认样式表。
脚本--作者:dynamicdrive.com
使用协议:http://www.dynamicdrive.com/notice.htm
复制代码 代码如下:

//Style Sheet Switcher version 1.0 Nov 9th, 2005
//Author: Dynamic Drive: http://www.dynamicdrive.com
//Usage terms: http://www.dynamicdrive.com/notice.htm
function getCookie(Name) {
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return null
}
function setCookie(name, value, days) {
var expireDate = new Date()
//set "expstring" to either future or past date, to set or delete cookie, respectively
var expstring=(typeof days!="undefined")? expireDate.setDate(expireDate.getDate()+parseInt(days)) : expireDate.setDate(expireDate.getDate()-5)
document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()+"; path=/";
}
function deleteCookie(name){
setCookie(name, "moot")
}
function setStylesheet(title) {
var i, cacheobj
for(i=0; (cacheobj=document.getElementsByTagName("link")[i]); i++) {
if(cacheobj.getAttribute("rel").indexOf("style") != -1 && cacheobj.getAttribute("title")) {
cacheobj.disabled = true
if(cacheobj.getAttribute("title") == title)
cacheobj.disabled = false //enable chosen style sheet
}
}
}
function chooseStyle(styletitle, days){
if (document.getElementById){
setStylesheet(styletitle)
setCookie("mysheet", styletitle, days)
}
}
var selectedtitle=getCookie("mysheet")
if (document.getElementById && selectedtitle!=null) //load user chosen style sheet if there is one stored
setStylesheet(selectedtitle)

调用方法
复制代码 代码如下:

<a title="默认风格" href="javascript:chooseStyle('default',5)">默认风格</a>
<a title="橙色风格" href="javascript:chooseStyle('orange',5)">橙色风格</a>
<a title="蓝色风格" href="javascript:chooseStyle('blue',5)">蓝色风格</a>

注意:title内容改成你样式表的名字,我这里是设定为5天。