)動態載入CSS

這裡說的動態載入是指載入外部CSS檔案和動態建立樣式表元素，在這裡我總結的方法可能不全，但是盡量希望能把自己在使用的過程當中用到的一些方法提供給大家。
　　首先來說如何動態載入一個外部的CSS檔案：(假設檔案名稱為style.css)
　　最沒有技術含量的方法：
　　document.write("");
　　@import(style.css)
　　這種方法只能用在外部CSS檔案或style結點中，基本上不能算作是動態。在FF和IE中均可行。
　　使用document.createStyleSheet()方法
　　這個方法是IE only的，參數可以傳遞一個樣式表中的值，如body{background: blue;}或者是一個外部CSS檔案的URL，使用方法如document.createStyleSheet(style.css)，此URL的地址相對於當前頁面。
　　動態建立link結點
　　function LoadCss(cssUrl) {
　　? var link = document.createElement("link");
　　? link.rel = "stylesheet";
　　? link.type = "text/css";
　　? link.href = "cssUrl";
　　? document.getElementsByTagName("body").item(0).appednChild(link);
　　}
　　這個方法在FF和IE中均可以使用，當然同樣的思路還可以來建立style結點，然後使用XMLHttpRequest方法來載入cssURL中的內容，並把建立的style結點的innerHTML設定成XMLHttpRequest的responseText，但由於我認為這是最不經濟、最不合理的一種方法，所以在這也就不講了。
　　更新當前某個link結點
　　思路同上，但是這種作法是替換掉一個已有的link標籤，可以用於更換網站的Theme，基本代碼如下：
　　function ChangeTheme(cssUrl) {
　　? var theme = document.getElementByName("theme"); //假設存在id為theme的結點
　　? theme.href = cssUrl;
　　}
　　這種方法我測試過，在FF和IE中均可行。
　　動態建立樣式元素
　　如果我想在網頁上增加一個如下的CSS元素，應該怎麼做呢？
　　.focus {
　　? color: red;
　　? font-style: bold;
　　}
　　當然，我可以建立一個style結點，然後把上面這段內容放到innerHTML中，那有沒有別的辦法呢？到目前為止，我還不知道除了上面那個方法以處一個在FF和IE中均可行的方法。不過在IE中我們可以這樣做：
　　var sheet = document.createStyleSheet();
　　sheet.addRule(".focus", "color: red; font-style: bold;");
　　文章中如有不對的地方，歡迎大家給我指正。

本文來自CSDN部落格，轉載請標明出處：http://blog.csdn.net/cxc3214/archive/2007/11/01/1861379.aspx