网页js换肤功能

2013.11.28 分享 18750 人浏览 6 条留言

换肤功能

目的是为了点击按键更换背景颜色,背景图片等功能(其实就是切换css),并且会保存cookies到本地,避免刷新后恢复默认样式

纯属个人备份,非喜勿扰!

JS

  1. function setActiveStyleSheet(title) {  
  2. var i, a, main;  
  3. for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {  
  4. if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {  
  5. a.disabled = true;  
  6. if(a.getAttribute("title") == title) a.disabled = false;  
  7. }  
  8. }  
  9. }  
  10.   
  11. function getActiveStyleSheet() {  
  12. var i, a;  
  13. for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {  
  14. if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");  
  15. }  
  16. return null;  
  17. }  
  18.   
  19. function getPreferredStyleSheet() {  
  20. var i, a;  
  21. for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {  
  22. if(a.getAttribute("rel").indexOf("style") != -1  
  23. && a.getAttribute("rel").indexOf("alt") == -1  
  24. && a.getAttribute("title")  
  25. return a.getAttribute("title");  
  26. }  
  27. return null;  
  28. }  
  29.   
  30. function createCookie(name,value,days) {  
  31. if (days) {  
  32. var date = new Date();  
  33. date.setTime(date.getTime()+(days*24*60*60*1000));  
  34. var expires = "; expires="+date.toGMTString();  
  35. }  
  36. else expires = "";  
  37. document.cookie = name+"="+value+expires+"; path=/";  
  38. }  
  39.   
  40. function readCookie(name) {  
  41. var nameEQ = name + "=";  
  42. var ca = document.cookie.split(';');  
  43. for(var i=0;i < ca.length;i++) {  
  44. var c = ca[i];  
  45. while (c.charAt(0)==' ') c = c.substring(1,c.length);  
  46. if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);  
  47. }  
  48. return null;  
  49. }  
  50.   
  51. window.onload = function(e) {  
  52. var cookie = readCookie("style");  
  53. var title = cookie ? cookie : getPreferredStyleSheet();  
  54. setActiveStyleSheet(title);  
  55. }  
  56.   
  57. window.onunload = function(e) {  
  58. var title = getActiveStyleSheet();  
  59. createCookie("style", title, 365);  
  60. }  
  61.   
  62. var cookie = readCookie("style");  
  63. var title = cookie ? cookie : getPreferredStyleSheet();  
  64. setActiveStyleSheet(title);  

html

  1. <link rel="stylesheet" type="text/css" href="style.css" />  
  2. <link rel="stylesheet" type="text/css" href="style-red.css" />  
  3. <link rel="stylesheet" type="text/css" href="style-green.css" title="name_one" />  
  4. <link rel="stylesheet" type="text/css" href="style-purple.css" title="name_two" />  
  5.   
  6. <!-- 样式切换 -->  
  7. <div id="style">  
  8.     <a id="red" href="#" onclick="setActiveStyleSheet('',1); return false;"></a>  
  9.     <a id="green" href="#" onclick="setActiveStyleSheet('name_one',1); return false;">绿</a>  
  10.     <a id="purple" href="#" onclick="setActiveStyleSheet('name_two',1); return false;"></a>  
  11. </div>  
  12. <!-- /样式切换 -->  

css

  1. /*style*/  
  2. #style{padding40px 0 2px 10px;  
  3. floatrightright;}  
  4. #style a{padding8px;color#fff;border1px #ccc solid;}  
  5. #red{background#F45F7D;}  
  6. #green{background#78bc27}  
  7. #purple{background#9933cc}  

文章地址:https://huilang.me/change-skins/

“网页js换肤功能” 有 6 条评论

  1. nyeah说道:

    喜欢简约点的,虽说这个很强大

  2. 诸葛小觉说道:

    好东东,先收了~

  3. yy说道:

    :!: :mrgreen: :lol: :idea: :idea: :!:

  4. 网友说道:

    请问cookies有用吗?

回复本文

您的电子邮箱地址不会被公开。 必填项已用 * 标注

icon_wink.gif icon_neutral.gif icon_mad.gif icon_twisted.gif icon_smile.gif icon_eek.gif icon_sad.gif icon_rolleyes.gif icon_razz.gif icon_redface.gif icon_surprised.gif icon_mrgreen.gif icon_lol.gif icon_idea.gif icon_biggrin.gif icon_evil.gif icon_cry.gif icon_cool.gif icon_arrow.gif icon_confused.gif icon_question.gif icon_exclaim.gif