使用js修改css样式表

有些状况下,咱们须要页面加载时就快速修改元素的样式,但若是在页面dom加载完后再修改css,虽然元素样式快速变化,但肉眼能观察到,因此须要JS动态生成样式表,声明所但愿的css样式.执行js时,页面会有很短暂的阻塞,等js执行完毕后,浏览器会根据所修改的样式继续渲染css.这样的样式才不会"闪一下"

.
如下是js代码,动态增长style

function addCSS(cssText){
        var style = document.createElement('style'),  //建立一个style元素
            head = document.head || document.getElementsByTagName('head')[0]; //获取head元素
        style.type = 'text/css'; //这里必须显示设置style元素的type属性为text/css，不然在ie中不起做用
        if(style.styleSheet){ //IE
            var func = function(){
                try{ //防止IE中stylesheet数量超过限制而发生错误
                    style.styleSheet.cssText = cssText;
                }catch(e){

                }
            }
            //若是当前styleSheet还不能用，则放到异步中则行
            if(style.styleSheet.disabled){
                setTimeout(func,10);
            }else{
                func();
            }
        }else{ //w3c
            //w3c浏览器中只要建立文本节点插入到style元素中就好了
            var textNode = document.createTextNode(cssText);
            style.appendChild(textNode);
        }
        head.appendChild(style); //把建立的style元素插入到head中
    }
//调用方法
addCSS('#init{display:block;}.mobile-wrap{visibility:hidden')