JS 插入CSS樣式的方法

JS 插入CSS樣式的方法

方法一：存在style標籤，獲取此style標籤，然後通過innerHTML內容插入css樣式：

<style id="mystyle">
    </style>
    <script type="text/javascript">
        var sty=document.getElementById("mystyle");
        sty.innerHTML+="div{width:200px;height:200px;background:red;border:solid 2px red}";
    </script>

    <div>This is a div</div>

結果：

注意：style標籤得在script代碼前，不然會引起錯誤Uncaught TypeError: Cannot read property ‘innerHTML’ of null，或者使用window.onload，那就可以隨便放style與script的位置也可以。

相關代碼：

<script type="text/javascript">
        window.onload=function(){
            var sty=document.getElementById("mystyle");
        sty.innerHTML+="div{width:200px;height:200px;background:red;border:solid 2px red}";
        }
    </script>
    <style id="mystyle">
</style>

方法二：不要求頁面中已經存在style標籤，動態創建新的style標籤。

<div id="div1">div1</div>
<div id="div2">div2</div>

JS代碼：

window.onload=function(){
            //方法一：
        var sty=document.getElementById("mystyle");
        sty.innerHTML+="#div1{width:200px;height:200px;background:red;border:solid 2px black}";

        //方法二：
        var insertCSS=function(cssStyle){
            var style=document.createElement("style");
            var theHead=document.head||document.getElementsByTagName('head')[0];
            style.type="text/css";//IE需要設置
            if(style.styleSheet){  //IE
                var ieInsertCSS=function(){
                    try{
                    style.styleSheet.cssText=cssStyle;
                    }catch(e){

                    }
                };
            //若當前styleSheet不能使用，則放到異步中
                if(style.styleSheet.disable){
                    setTimeout(ieInsertCSS,10);

                } else{
                    ieInsertCSS();
                }
             } else{ //W3c瀏覽器
                style.appendChild(document.createTextNode(cssStyle));
                theHead.appendChild(style);

            }

        }

        insertCSS("#div2{width:200px;height:200px;background:yellow;border:solid 2px black}")
    }

方法二結果：

對IE來說style和script節點是特殊的節點，不允許訪問其子節點，因此，IE會在添加子節點的時候報錯。
style.appendChild(document.createTextNode(cssStyle));
解決IE的這個問題就是訪問元素的styleSheet屬性，該屬性又有cssText屬性，可用於接收CSS代碼。在賦值CSS代碼之前，IE還需要將style節點的type屬性設置爲“text/css”
html元素：