支持cookie的无刷新换肤

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="utf-8">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>支持cookie的无刷新换肤</title>
<script type="text/javascript">
function change_css(css_id,css_document,cookie_name){ 
document.getElementById(css_id).setAttribute("href",css_document);
set_cookie(cookie_name,css_document,365);//保存为1年,当然,你也可以把它分离出来,做为参数设置 
} 
function set_cookie(c_name,c_value,c_expires,c_path,c_domain,c_secure){
var cookie_string=c_name + "=" + escape(c_value);
if(c_expires){ 
var expires = new Date();
expires.setTime(expires.getTime() + c_expires*24*60*60*1000); 
cookie_string+=";expires="+expires; 
} 
if(c_path){ 
cookie_string+=";path="+c_path; 
} 
if(c_domain){ 
cookie_string+=";domain="+c_domain; 
} 
if(c_secure){ 
cookie_string+=";secure"; 
}
document.cookie=cookie_string; 
}  
function get_cookie(cookie_name){ 
var cookie_pos = document.cookie.indexOf(cookie_name); 
if (cookie_pos != -1){
cookie_pos += cookie_name.length + 1; 
var cookie_end = document.cookie.indexOf(";", cookie_pos); 
if (cookie_end == -1){ 
cookie_end = document.cookie.length;
} 
var value = unescape(document.cookie.substring(cookie_pos,cookie_end)); 
} 
return value; 
} 
window.onload = function() { 
var d_css_document="default.css";//默认的css文件
var cookie = get_cookie("myskin");
var css_document=cookie?cookie:d_css_document;

change_css("skin",css_document,"myskin");
} 
</script>
<link id="skin" media="all" type="text/css" rel="stylesheet" /> 
</head>
<body>
<div onclick="change_css('skin','default.css','myskin');">点我,换黑色</div> 
<div onclick="change_css('skin','blue.css','myskin')">点我,换蓝色</div> 
<div onclick="change_css('skin','red.css','myskin')">点我,换红色</div>
</body>
</html>

JS文件:

https://files.cnblogs.com/kb0662/skin.js

posted @ 2013-11-25 12:37  perseus  阅读(138)  评论(0编辑  收藏  举报