根據使用者選擇用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) {<br /> var i, a, main;<br /> for(i=0; (a = document.getElementsByTagName("link")[i]); i++)<br /> {<br /> if(a.getAttribute("rel").indexOf("style")!= -1 && a.getAttribute("title"))<br /> {<br /> a.disabled = true;<br /> if(a.getAttribute("title") == title)<br /> a.disabled = false;<br /> }<br /> }<br />}<br />function getActiveStyleSheet() {<br /> var i, a;<br /> for(i=0; (a = document.getElementsByTagName("link")[i]); i++)<br /> {<br /> if(a.getAttribute("rel").indexOf("style")!= -1 &&<br /> a.getAttribute("title") && !a.disabled)<br /> return a.getAttribute("title");<br /> }<br /> return null;<br />}<br />function getPreferredStyleSheet() {<br /> var i, a;<br /> for(i=0; (a = document.getElementsByTagName("link")[i]); i++)<br /> {<br /> if(a.getAttribute("rel").indexOf("style") != -1<br /> && a.getAttribute("rel").indexOf("alt") == -1<br /> && a.getAttribute("title"))<br /> return a.getAttribute("title");<br /> }<br /> return null;<br />}<br />function createCookie(name,value,days) {<br /> if (days)<br /> {<br /> var date = new Date();<br /> date.setTime(date.getTime()+(days*24*60*60*1000));<br /> var expires = "; expires="+date.toGMTString();<br /> }<br /> else<br /> expires = "";<br /> document.cookie = name+"="+value+expires+";<br /> path=/";<br />}<br />function readCookie(name) {<br /> var nameEQ = name + "=";<br /> var ca = document.cookie.split(';');<br /> for(var i=0;i < ca.length;i++)<br /> {<br /> var c = ca[i];<br /> while (c.charAt(0)==' ')<br /> c = c.substring(1,c.length);<br /> if (c.indexOf(nameEQ) == 0) return<br /> c.substring(nameEQ.length,c.length);<br /> }<br /> return null;<br />}<br />window.onload = function(e)<br />{<br /> var cookie = readCookie("style");<br /> var title = cookie ? cookie :<br /> getPreferredStyleSheet();<br /> setActiveStyleSheet(title);<br />}<br />window.onunload = function(e)<br />{<br /> var title = getActiveStyleSheet();<br /> createCookie("style", title, 365);<br />}<br />var cookie = readCookie("style");<br />var title = cookie ? cookie :<br />getPreferredStyleSheet();<br />setActiveStyleSheet(title);

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