如何在靜態HTM頁面中實現無重新整理的更換CSS樣式

 

 

 在靜態HTM頁面中實現無重新整理的更換CSS樣式！

    系統原來的更換CSS模板是要重新重新整理一下兒頁面的，我一直都對這個功能很不滿意，百分之九十五的功能都用AJAX無重新整理的實現了，難道要在這個小小的更換頁面CSS模板上給使用者添點噁心嗎？於是，昨天晚上好好考慮了這個功能上的實現，原來發現其實並不難，小改一下就OK了，現在系統上的模板更換是不用重新整理頁面來完成的，明顯在感覺上比原來好得多了，下面談談經驗吧： 

    對於一個多頁面的網站來說了，CSS的更換不能只簡單的在一個頁面中調用更換CSS功能更新這個頁面頭上連結的CSS地址，因為它不能保證在點擊了別的頁面後新的樣式應該到新開啟的頁面中去，因此，一定要有一個全域性的變數來記錄它，我選用的是SESSION，在使用者點擊了側邊模板下拉框中的模板時，觸發了下拉框的ONCHANGE事件，執行了一段AJAX程式，程式的功能是將使用者選中的模板資訊發送給伺服器，伺服器接收新的模板資訊後更新表示模板的SESSION值，然後向用戶端返回成功資訊，用戶端則根據返回的成功資訊來改變頁面樣式，注意：我在頁面頭中寫的CSS連結資訊是這樣子的:

程式碼
<LINK id=cssLink href="css.aspx" type=text/css rel=stylesheet>

css.aspx是一個ASP.net的頁面，它的作用只是單一的根據SESSION中的當前CSS模板資訊來轉向所應CSS樣式表檔案！這樣子的處是用戶端在接收到了伺服器端成功更新SESSION的資訊後剛不用考慮其它的東西，直接一句：

       document.getElementById("cssLink").href=document.getElementById("cssLink").href;

 將cssLink的href重新寫一下兒，雖然是前後一模一樣子的值，但這會激發CSS.ASPX頁面重新讀一下兒，這樣子CSS.ASPX頁面就能轉到新更新的CSS樣式表了！由於網站別的頁面的樣式表連結資訊都是這樣寫的，所以每個頁面載入時都是會應用最新更新的樣式表的，這樣子，網站無重新整理的全域更新樣式表就實現了！！