使用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')