實時切換網頁的CSS樣式實現

2020-03-24 16:55:34

字體：大中小

來源：轉載

供稿：網友

實時切換CSSyangshi_10628_1.html' target='_blank'>CSS樣式
用W3C標準建造的網站，從理論上來說可以做到完全的表現與結構相分離。打個比方，就是可以在不動骨架（結構，XHMTL）和肌肉（行為，Javascript）的前提下，徹徹底底地換一身皮（表現，CSS）。當然，換皮之前你需要先按W3C標準建好你的網站，并且為它準備兩套表現不一樣的CSS。“換皮”實質上就是“換CSS”，我們要做的，只是用某種方法讓瀏覽器載入另一套CSS，重新渲染頁面。方法有很多種，我就介紹最常見的三種。方法一：什么也不干啊？什么也不干？嗯，這個……準確地說是：就干那么一丁點兒（你還真以為有這么好的事兒呀……）。假設我們有兩套CSS，分別封閉在兩個不同的文件中：a.css和b.css。然后在 head 和 /head 之間加入如下兩行XHTML代碼：
然后用你的Firefox打開這個頁面，在菜單欄中選擇：查看 - 頁面風格，應該可以看到如下的“風景”：就這么簡單，現在你就可以用Firefox來“換皮”了。IE？IE沒這個功能……MS就是這么拽，W3C“明文推薦”：要求瀏覽器提供給用戶自己選擇樣式表的權力，可它就不這么干。幸運的是這件事也不是太難雜，咱就代勞一下吧。[separator]方法二：Javascript在方法一的基礎上，可以用Javascript的DOM方法訪問link對象，再將不需要的CSS設為“禁用（disabled）”，剩下的CSS就會被瀏覽器用來渲染頁面。腳本如下，請注意其中的注釋：
然后在合適的地方調用這個函數，以本頁為例，添加如下兩個按鈕： input type="button" value="清光" / input type="button" value="冥焰" / 使用Javascript的好處是方便、快捷、簡單，缺點也是很明顯的：很難做到全站的CSS切換，只能局限在當前頁上。為了記憶用戶的選擇，可行的方案就是采用cookie。可是就算使用cookie，也需要在何時載入CSS，用戶沒有Javasciprt支持怎么辦等問題上多做好些文章。所以不如用下面的方法——方法三：服務器端腳本毫無疑問，最好的CSS切換器應該使用服務器端腳本（PHP、ASP、JSP等）來開發。這樣做的好處是很明顯的：直接、高效、兼容性好、可以記憶用戶選擇、甚至可以組合不同的CSS實現相當復雜的“皮膚”切換。我這里就用PHP為例，用其他的語言也都大同小異，對一般的開發人員來說不會有任何困難。基本思路是這樣：用戶選擇一種“皮膚”，把用戶的選擇記入cookie（記入數據庫也一樣，不過這樣系統開銷會大一些），用戶訪問網站上的任何一個頁面時，再從cookie（或數據庫）中讀出之前用戶的選擇，載入相應的CSS文件（這里還是以方法一中講到的a.css和b.css為例）。創建一個名為switcher.php的文件，內容如下： ?php$style =html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：內容頁嵌套母版頁時，內容頁如何調用css和javascript

下一篇：用Vue+CSS3怎么做交互特效