根據用戶選擇用JS切換生效的CSS文件實現網站網頁換膚

 

說明：關於實現這個用途的文章，一般只是直接給了代碼，沒有對關鍵知識點的必要解釋。本文側重講解原理和關鍵點，爲方便網友使用，在後面附加了具體的代碼，可實現將選擇的風格名稱存到cookie裏去。

 

正文：

　　想要進行網頁的換膚，如果用普通的獲取各個顯示對象然後更改對象的各項STYLE屬性或者只是CLASS屬性，缺點是十分明顯的：

　　１、涉及對大量的網頁內對象讀寫，並可能操作多項STYLE屬性，JS代碼量多。

　　２、STYLE代碼分散，缺乏組織，更改維護麻煩。

　　那麼更好的方法是什麼呢？　就是直接對LINK對象進行切換設置。大家知道，通過LINK可以引用外部的CSS文件，使之對當前頁面內容生效。一般語法是這樣的：

　　<link type="text/css" rel="stylesheet" href="http://theforever.myid/theforever.css" />

　　假設網頁提供了N種風格供切換，就可以用N條這樣的語句，把CSS文件引進來。需要注意的是，除當前生效CSS以外的LINK標籤應該這樣寫：

　　<link type="text/css" rel="alternate stylesheet" href="http://theforever.myid/theforever.css" />

　　alternate的意思是“供替換的”，這樣瀏覽器就不會根據這套暫時不想生效的CSS對頁面顯示進行實際的設置。

　　那麼如何來切換當前生效的CSS文件，產生換膚效果呢？　就是利用LINK對象的disabled屬性。當disabled屬性爲真時，該LINK對象失效，當disabled屬性爲假時，則該LINK對象生效。

　　這樣一來就知道，有針對地設置相應的LINK對象的disabled屬性，就可以實現切換了。

　　如何將用戶的選擇和LINK對象一一對應起來呢？　這個方法就多了：

　　１.可以給LINK加不同的ID屬性，然後document.getElementsById('用戶選擇的LINK's ID')就得到了指定的LINK。

　　２.可以給LINK加不同的TITLE屬性，然後遍歷所有document.getElementsByTagName('link')，取每個LINK對象的TITLE進行對比。

　　３.可以給LINK加不同的自定義屬性，然後同上。

　　至於如何取得用戶所選擇的顯示風格（或說皮膚）的名稱，這個方式就更多了，也很簡單，就不列出某個固定的方式了。

 

 

　　原本不想引用羅列具體的代碼，但爲了方便一些懶惰成性的朋友，還是附加了一套現成的代碼，可實現將用戶選擇的界面風格名稱存到cookie裏去，下次打開網頁就會看到上次更改的界面風格：

 

unction 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);

作者：趙亮（theforever,碧海情天,on csdn.net）