爱奇思

学习就是——从糊涂中慢慢走向清醒,然后再从清醒中慢慢走向糊涂,所以说我说它是一个O,只是圆的半径慢慢的扩大罢了!
posts - 60, comments - 128, trackbacks - 0, articles - 8
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

动态添加css

Posted on 2010-05-03 12:08 牛牛博客 阅读(...) 评论(...) 编辑 收藏

      好久没写文章了今天关于动态添加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');