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

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

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

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

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

function includeLinkStyle(url) {
 var link = document.createElement("link");
 link.rel = "stylesheet";
 link.type = "text/css";
 link.href = url;
 document.getElementsByTagName("head")[0].appendChild(link);
}

直接使用引入一個外部樣式檔案似乎不合適，所以選擇了第二種方案，在頁面中使用c9ccee2e6ea535a969eb3f532ad9fe89標籤插入頁面樣式。

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

這種方式在各個主流瀏覽器存在相容性問題，像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將樣式字串加入c9ccee2e6ea535a969eb3f532ad9fe89標籤內;

function includeStyleElement(styles, styleId) {
    if (document.getElementById(styleId)) {
        return
    }
    var style = document.createElement("style");
    style.id = styleId;
    //这里最好给ie设置下面的属性
    /*if (isIE()) {
style.type = "text/css";
style.media = "screen"
}*/
    (document.getElementsByTagName("head")[0] || document.body).appendChild(style);
    if (style.styleSheet) { //for ie
        style.styleSheet.cssText = styles;
    } else { //for w3c
        style.appendChild(document.createTextNode(styles));
    }
}
var styles = "#div{background-color: #FF3300; color:#FFFFFF }";
includeStyleElement(styles, "newstyle");

這樣頁面中的元素就能直接套用樣式了，不管你的這些元素是不是透過腳本追加的。

以上是Javascript從外部動態引入樣式和檔案的用法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！