js修改样式表规则

        <div>adasfsfs</div>

        <div id="div">adasfsfs</div>

        <div>adasfsfs</div>

        <div>adasfsfs</div>

        <p>adasfsfs</p>

            if(!document.styleSheets || document.styleSheets.length <= 0) {var style = document.createElement('style');

                style.type = 'text/css';

                style.innerHTML = "";

                document.getElementsByTagName('HEAD')[0].appendChild(style);

            }

            var sheet = document.styleSheets[0]; //新增样式规则

            function insertCss(element, csName, position) { //跨浏览器兼容

                if(sheet.insertRule) { // sheet.insertRule 非IE的时候会读取到一个函数，IE8即以上的时候会读取到undefined

                    sheet.insertRule(element + '{' + csName + '}', position);

                } else if(sheet.addRule) {

                    sheet.addRule(element, csName, position);

                }

            }

            insertCss('#div', 'font-size:16px;color:orange', 0); //删除样式规则

            function test() {

                var dv = document.createElement('div');

                dv.id = 'div';

                dv.innerHTML = "cs";

                document.getElementsByTagName('body')[0].appendChild(dv);

            }

            function deleteCss(position) { //跨浏览器兼容

                if(sheet.deleteRule) {

                    sheet.deleteRule(position);

                } else if(sheet.removeRule) {

                    sheet.removeRule(position);

                }

                deleteCss(0);

            }

与直接操作style样式表相比，修改样式表规则可以实现样式表的多次利用