动态添加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#dfdfdfsolid; " ;
   这种方式相比第一种优点是可以一次进行多个样式的设定，但仍是内联式，引起页面回流，多次插入引起性能上的消耗。
3. 第三种是：直接在style标签中写，这种方法要考虑不同浏览器的兼容性问题。（声明：下面代码引用”司徒正美“的一段代码）
   

   varaddSheet=function() {
   vardoc,cssCode;
   if(arguments.length==1){
   doc=document;
   cssCode=arguments[0]
   } elseif(arguments.length==2) {
   doc=arguments[0];
   cssCode=arguments[1];
   } else {
   alert("addSheet函数最多接受两个参数!");
   }
   if(!+"\v1") { //增加自动转换透明度功能，用户只需输入W3C的透明样式，它会自动转换成IE的透明滤镜
   vart=cssCode.match(/opacity : (\d?\.\d+) ; /);
   if(t!=null){
   cssCode=cssCode.replace(t[0],"filter : alpha(opacity="+parseFloat(t[1])*100+")")
   }
   }
   cssCode=cssCode+"\n";//增加末尾的换行符，方便在firebug下的查看。
   varheadElement=doc.getElementsByTagName("head")[0];
   varstyleElements=headElement.getElementsByTagName("style");
   if(styleElements.length==0) { //如果不存在style元素则创建
   if(doc.createStyleSheet){//ie
   doc.createStyleSheet();
   } else {
   vartempStyleElement=doc.createElement('style');//w3c
   tempStyleElement.setAttribute("type","text/css");
   headElement.appendChild(tempStyleElement);
   }
   }
   varstyleElement=styleElements[0];
   varmedia=styleElement.getAttribute("media");
   if(media!=null&&!/screen/.test(media.toLowerCase())) {
   styleElement.setAttribute("media","screen");
   }
   if(styleElement.styleSheet) { //ie
   styleElement.styleSheet.cssText+=cssCode;
   } elseif(doc.getBoxObjectFor) {
   styleElement.innerHTML+=cssCode;//火狐支持直接innerHTML添加样式表字串
   } else {
   styleElement.appendChild(doc.createTextNode(cssCode))
   }
   }

   

4.动态加载css文件，这个就简单了

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