javascript/js 原生動態引入外部css文件及動態插入css代碼片段

動態創建css樣式有兩種方式：

1.引入外部css文件
2.插入css代碼片段
動態插入css外部文件的方法：

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

動態加載css代碼片段

function loadCssCode(code){
    var style = document.createElement('style');
    style.type = 'text/css';
    style.rel = 'stylesheet';
    //for Chrome Firefox Opera Safari
    style.appendChild(document.createTextNode(code));
    //for IE
    //style.styleSheet.cssText = code;
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(style);
}
loadCssCode('body{background-color:#f00}');

IE中標籤被視爲一個特殊標籤，不能訪問其子元素，所以要使用stylesheet.cssText，使用try catch語句捕獲IE拋出的錯誤，兼容代碼如下：

function loadCssCode(code){
var style = document.createElement('style');
    style.type = 'text/css';
    style.rel = 'stylesheet';
    try{
        //for Chrome Firefox Opera Safari
        style .appendChild(document.createTextNode(code));
    }catch(ex){
        //for IE
        style.styleSheet.cssText = code;
    }
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(style);
}
loadCssCode('body{background-color:#f00}');

這種方式可以實時向頁面添加樣式，所以可以立即在頁面上得意反應