스타일 요소 동적 추가

/**
 * @description IE6~9 ，            ：
 *  1）link+style         31 ；
 *  2）  css   rule  ，    4095 ;
 *  3）<pre>@import</pre>         4 。
 *  
 *           link/style     ，                  1   。
 * @author shawnwu
 * @date 2013-09-03
 */
(function(win){
    var doc = document,
        head = document.getElementsByTagName("head")[0],
        linkEls = doc.getElementsByTagName("link"),
        styleEls = doc.getElementsByTagName("style"),
        poorIE = /MSIE ([^;]+)/.test(navigator.userAgent) && parseInt(RegExp.$1,10) < 10,
        IMPORT_ID = "importLink_ID",
        APPEND_ID = "appendStyle_ID",
        /**
         * IE6~9  BUG:link+style     ，    31 。
         */
        LIMIT = 31,
        //               style  ：    import，    append
        maxNum =  LIMIT - 2,
        isLimited = false;
    
    /**
     * @description       LINK  
     * @param {String} url     
     * @return link  
     */
    function createLinkEl(url){
        var link = doc.createElement("link");
        link.type = "text/css";
        link.rel = "stylesheet";
        link.href = url;
        head.appendChild(link);
        return link;
    }
    
    /**
     * @description       style  
     * @param {String} str     
     * @param {String} id   ID
     * @return style  
     */
    function createStyleEl(str,id){
        var el = doc.createElement("style");
        el.type = "text/css";
        if(id){
            el.id = id;
        }
        if(str){
            if(poorIE){
	            el.styleSheet.cssText = str; //IE  
	        }else{
	            el.appendChild(document.createTextNode(str));  
	        }
        }
        head.appendChild(el);
        return el;
    }
  
    function checkLimit(){
        if(!isLimited && poorIE){
            if(linkEls.length + styleEls.length >= maxNum){
                isLimited = true;
            }
        }
        return isLimited;
    }
    
    function loadStyle(url){
        if(checkLimit()){
            doImportStyle(url);
        }else{
            doLoadStyle(url);
        }
    }
    
    function loadStyleStr(str){
        if(checkLimit()){
            doAppendStr(str);
        }else{
            doLoadStr(str);
        }
    }
    
    function doLoadStr(str){
        createStyleEl(str);
    }
    
    function doAppendStr(str){
        var el = doc.getElementById(APPEND_ID);
        if(!el){
            createStyleEl(str,APPEND_ID);
        }else{
            el.styleSheet.cssText = el.styleSheet.cssText + str;
        }
    }
    
    function doImportStyle(url){ 
        var el = doc.getElementById(IMPORT_ID),
            styleEl = null;
        if(!el){
            styleEl = createStyleEl(null,IMPORT_ID);
            styleEl.styleSheet.addImport(url);
        }else{
            el.styleSheet.addImport(url);
        }
    }
    
    function doLoadStyle(url){
        createLinkEl(url)
    }
    
    //export
    win.cssUtil = {
        //    css
        loadStyle: loadStyle,

        //        
        loadStyleStr: loadStyleStr
    };
})(window);