Javascript 切换页面 CSS 样式

越来越多的网站制作者期望为自己的网站设计多种风格，以便访问者能够选择自己喜欢的样式进行浏览，本文介绍的就是一个切换页面样式的解决方案。


--------------------------------------------------------------
点此浏览示例文件
--------------------------------------------------------------


Javascript:

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




css 标签调用方式：
HTML:

1.  
2. <link rel="stylesheet" type="text/css" href="css/white.css" title="white" />
3. <link rel="alternate stylesheet" type="text/css" href="css/black.css" title="black" />
4.  

切换方式：
HTML:

1.  
2. <a href="#" onclick="setActiveStyleSheet('white'); return false;">白色背景 </a>
3.  
4. <a href="#" onclick="setActiveStyleSheet('black'); return false;">黑色背景 </a>
5.