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元素：