動態添加css

      好久沒寫文章了今天關於動態添加css檔案寫一點想法

1.       第一種添加方式：
   document.getElementById("elementId").style.background="#ff0000";

   這種方式採用內聯是插入css.優先順序高。容易引起頁面迴流效能不好   也不能進行多個樣式的添加

2. 第二種方式：

    document.getElementsByTagName("a")[0].style.cssText = "background:#ff0000;border:1px #dfdfdf solid;";

    

    

    這種方式 相比第一種優點是可以一次進行多個樣式的設定，但仍是內聯式，引起頁面迴流，多次插入引起效能上的消耗。

3. 第三種是：直接在style標籤中寫，這種方法要考慮不同瀏覽器的相容性問題。（聲明：下面代碼引用”司徒正美“的一段代碼）        var addSheet = function () {
               var doc, cssCode;
               if (arguments.length == 1) {
                   doc = document;
                   cssCode = arguments[0]
               } else if (arguments.length == 2) {
                   doc = arguments[0];
                   cssCode = arguments[1];
               } else {
                   alert("addSheet函數最多接受兩個參數!");
               }
               if (! +"\v1") {//增加自動轉換透明度功能，使用者只需輸入W3C的透明樣式，它會自動轉換成IE的透明濾鏡  
                   var t = cssCode.match(/opacity:(\d?\.\d+);/);
                   if (t != null) {
                       cssCode = cssCode.replace(t[0], "filter:alpha(opacity=" + parseFloat(t[1]) * 100 + ")")
                   }
               }
               cssCode = cssCode + "\n"; //增加末尾的分行符號，方便在firebug下的查看。  
               var headElement = doc.getElementsByTagName("head")[0];
               var styleElements = headElement.getElementsByTagName("style");
               if (styleElements.length == 0) {//如果不存在style元素則建立  
                   if (doc.createStyleSheet) {    //ie  
                       doc.createStyleSheet();
                   } else {
                       var tempStyleElement = doc.createElement('style'); //w3c  
                       tempStyleElement.setAttribute("type", "text/css");
                       headElement.appendChild(tempStyleElement);
                   }
               }
               var styleElement = styleElements[0];
               var media = styleElement.getAttribute("media");
               if (media != null && !/screen/.test(media.toLowerCase())) {
                   styleElement.setAttribute("media", "screen");
               }
               if (styleElement.styleSheet) {    //ie  
                   styleElement.styleSheet.cssText += cssCode;
               } else if (doc.getBoxObjectFor) {
                   styleElement.innerHTML += cssCode; //Firefox支援直接innerHTML添加樣式表字串  
               } else {
                   styleElement.appendChild(doc.createTextNode(cssCode))
               }
           }

    

      

        4.動態載入css檔案，這個就簡單了

        

 

            function addStyle(stylePath) {
                var container = document.getElementsByTagName("head")[0];
                var addStyle = document.createElement("link");
                addStyle.rel = "stylesheet";
                addStyle.type = "text/css";
                addStyle.media = "screen";
                addStyle.href = stylePath;
                container.appendChild(addStyle);
            }
            addStyle('css/add.css');