网页js换肤功能

2013.11.28 分享 18683 人浏览 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{padding: 40px 0 2px 10px;  
  3. float: rightright;}  
  4. #style a{padding: 8px;color: #fff;border: 1px #ccc solid;}  
  5. #red{background: #F45F7D;}  
  6. #green{background: #78bc27}  
  7. #purple{background: #9933cc}  

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

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

  1. nyeah说道：
    2013 年 12 月 3 日 上午 9:05

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

    回复
  2. 诸葛小觉说道：
    2013 年 12 月 4 日 上午 10:52

    好东东，先收了~

    回复
  3. yy说道：
    2013 年 12 月 22 日 下午 12:10

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

    回复
  4. 网友说道：
    2014 年 8 月 21 日 下午 10:13

    请问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