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样式表相比，修改样式表规则可以实现样式表的多次利用