动态添加css的三种方法（示例很清楚）

转自：http://www.cnblogs.com/niuniu/archive/2010/05/03/1726303.html

 好久没写文章了今天关于动态添加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; //火狐支持直接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');