<转>超酷的无刷新可保存CSS换肤实现方法(兼容IE6.0/7.0/8.0/FF)

转帖：http://bbs.kesion.com/dispbbs.asp?boardid=41&ID=69667

目标是通过点击图片能无刷新更换外部样式表（换肤），且将最后一次的样式设置保存在cookie中，这样，即使关闭浏览器再打开还是上一次的皮肤。

首先先建一个文本文件，输入以下代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

function getCookie(name) {

var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");

if(arr=document.cookie.match(reg))

return unescape(arr[2]);

else

return null;

}

//设置cookie

function setCookie(name,value)

{

var Days = 30;

var exp = new Date();

exp.setTime(exp.getTime() + Days*24*60*60*1000);

document.cookie = name + "="+ escape (value) + ";

expires=" + exp.toGMTString();

}

//定义css路径

var cssPath = "css/style";

var styleID=0; //

document.write('<link rel="stylesheet" type="text\/css" id="cssLink" href="'+cssPath+styleID+'.css" \/>');

//改变样式

function styleChange(n) {

var cssLink=document.getElementById("cssLink");

cssLink.href = cssPath+n+".css";

setCookie("color",cssPath+n+".css");

}

//如果cookie不为空就显示关闭页面之前的样式，否则就显示换肤的css

if (getCookie("color")!=null) {

document.write('<link rel="stylesheet" type="text\/css" id="cssLink" href="'+getCookie("color")+'" \/>');

} else {

document.write('<link rel="stylesheet" type="text\/css" id="cssLink" href="'+cssPath+styleID+'.css" \/>');

}

</script>

</head>

<body>

</div>

<div id="warptest"> 测试文字测试文字</div>

</body>

</html>

保存并重命名为index.html,然后在根目录下新建一个名为CSS的文件夹，把下面这张图片重命名为theme.gif放入这个文件夹中
此主题相关图片如下：theme.gif ，再在这个文件夹中新建五个文本文件，分别重命名为：style.css、style1.css、style2.css、style3.css和style4.css，

以下是各个css文件的内容：

style.css:

#title a.red { background-position:15px 0px;}

#title a.yellow { background-position:75px 0px;}

#title a.blue { background-position:55px 0px;}

#title a.green { background-position:95px 0px;}

#warptest { width:480px; height:100px; background:#f7f7f7; border:1px solid #d3d3d3; padding:10px; color:#666;float:left}

#title{float:left}

#title a {margin-right:5px; width:15px; height:15px; text-indent:-999px; overflow:hidden; display:block; cursor:pointer; background-image:url(theme.gif);}

style1.css：

#warptest { width:480px; height:100px; background:#fdf8f8; border:1px solid #990099; padding:10px; color:#990099}

#title a.red { background-position:15px 15px;}

style2.css：

#warptest { width:480px; height:100px; background:#fffff7; border:1px solid #ffcc00; padding:10px; color:#b28f06}

#title a.yellow { background-position:75px 15px;}

style3.css：

#warptest { width:480px; height:100px; background:#e8f5fe; border:1px solid #a9c9e2; padding:10px; color:#1b3d58}

#title a.blue { background-position:55px 15px;}

style4.css：

#warptest { width:480px; height:100px; background:#f8ffe7; border:1px solid #abdc8d; padding:10px; color:#33581d}

#title a.green { background-position:95px 15px;}

好了，全部保存，用浏览器打开index.html,就可以看到效果了

posted on 2012-11-06 14:59 慢阳阳阅读(269) 评论(0) 编辑收藏举报