支持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文件: