用cookies实现的可记忆的样式切换效果代码下载

无刷新cookies切换样式示例代码实例主要用到的代码复制代码代码如下:<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>styleswitcher脚本之家-www.jb51.net </title> <link title=red rel="stylesheet" type="text/css" href="red.css"> <LINK title=blue href="blue.css" type=text/css rel="alternate stylesheet"> <SCRIPT src="styleswitcher.js" type=text/javascript></SCRIPT> <style>  </style> </head> <body> <A onclick="setActiveStyleSheet('red');return false;" href="#">red</A> <A onclick="setActiveStyleSheet('blue');return false;" href="#">blue</A> <select name="changestyle" size="1"> <option value="red">red</option> <option value="blue">blue</option> </select><input type="button" value="变" onclick="setActiveStyleSheet(changestyle.value);return false;"> <div id="wrapper"> <div id="left">left</div> <div id="right">right</div> </div> </body> </html> styleswitcher.js 复制代码代码如下:// styleswitcher.js function setActiveStyleSheet(title) { var i, a, main; for(i = 0; (a = document.getElementsByTagName("link")[i]); i++) { if (a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) { a.disabled = true; if (a.getAttribute("title") == title) a.disabled = false; } } } function getActiveStyleSheet() { var i, a; for(i = 0; (a = document.getElementsByTagName("link")[i]); i++) { if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && ! a.disabled) return a.getAttribute("title"); } return null; } function getPreferredStyleSheet() { var i, a; for (i = 0; (a = document.getElementsByTagName("link")[i]); i++) { if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("rel").indexOf("alt") == -1 && a.getAttribute("title")) return a.getAttribute("title"); } return null; } function createCookie(name, value, days) { if (days) { var date = new Date(); date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); var expires = "; expires=" + date.toGMTString(); } else expires = ""; document.cookie = name + "=" + value + expires + "; path=/"; } function readCookie(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for (var i = 0; i < ca.length; i++) { var c = ca[i]; while (c.charAt(0) == ' ') c = c.substring(1, c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length); } return null; } window.onload = function(e) { var cookie = readCookie("style"); var title = cookie ? cookie : getPreferredStyleSheet(); setActiveStyleSheet(title); } window.onunload = function(e) { var title = getActiveStyleSheet(); createCookie("style", title, 365); } var cookie = readCookie("style"); var title = cookie ? cookie : getPreferredStyleSheet(); setActiveStyleSheet(title); red.css复制代码代码如下:#left { background-color:#0000FF; float:right;}red.css复制代码代码如下:#left { background-color:#FF0000;float:left; }

　　推荐阅读

　　js获取url参数的使用扩展实例

最近网站改版，发现网站的广告都是直接网址，如果转向一下，对于本站的全职会好点需要一个html页面来传递参数所以用到个js获取url参数的代码，就一个funciton 参考http://img.jb51.net/url.htm?url=http://www.ba>>>详细阅读

本文标题：用cookies实现的可记忆的样式切换效果代码下载

地址：http://www.17bianji.com/kaifa2/JS/29882.html

1/2 1