Javascript從外部動態引入樣式和檔案的用法詳解

javascript插入樣式在前端開發中應用比較廣泛，特別是在修改前端表現和頁面換膚的時候。

一般情況下javascript動態插入樣式有兩種，一種頁面中引入外部樣式,在 中使用 標籤引入一個外部樣式文件，另一種是在頁面中使用 標籤插入頁面樣式（這裡說的不是style屬性）。

一、頁面中引入外部樣式：

在 中使用 標籤引入一個外部樣式文件，這個比較簡單，各個主流瀏覽器也不存在相容性問題：

function includeLinkStyle(url) { var link = document.createElement("link"); link.rel = "stylesheet"; link.type = "text/css"; link.href = url; document.getElementsByTagName("head")[0].appendChild(link); } 登入後複製 直接使用引入一個外部樣式檔案似乎不合適，所以選擇了第二種方案，在頁面中使用 標籤插入頁面樣式。

二、使用 標籤插入頁面樣式：

這種方式在各個主流瀏覽器存在相容性問題，像firefox等標準瀏覽器無法直接取得設定styleSheet的cssText值，標準瀏覽器下只能使用document.styleSheets[0].cssRules[0].cssText單一取得樣式；同時使用：document.styleSheets[0].cssRules[ 0].cssText=newcssText；頁面不會自動更新樣式，必須使用：document.styleSheets[0].cssRules[0].style.cssText=newcssText；這點似乎沒坑爹的IE來的人性化和簡單。 YUI中使用了一個很好的方法：style.appendChild(document.createTextNode(styles));採用createTextNode將樣式字串加入 標籤內;