JS addRule()和insertRule()方法：添加CSS样式

在 JavaScript 中，使用 addRule() 方法可以为样式表增加一个样式。用法如下：

styleSheets.addRule(selector, style, [index])

styleSheets 表示样式表引用，参数说明如下：

• selector：表示样式选择符，以字符串的形式传递。
• style：表示具体的声明，以字符串的形式传递。
• index：表示一个索引号，表示添加样式在样式表中的索引位置，默认为 -1，表示位于样式表的末尾，该参数可以不设置。

Firefox 支持使用 insertRule() 方法添加样式。用法如下：

styleSheet.insertRule(rule, [index])

参数说明如下：

• rule：表示一个完整的样式字符串。
• index：与 addRule() 方法中的 index 参数作用相同，但默认为 0，放置在样式表的末尾。

示例

在下面示例中，先在文档中定义一个内部样式表，然后使用 styleSheets 集合获取当前样式表，利用数组默认属性 length 获取样式表中包含的样式个数，最后在脚本中使用 addRule() （或 insertRule()）方法增加一个新样式，样式选择符为 p，样式声明背景色为红色，字体颜色为白色，段落内部补白为 1 个字体大小。

<style type="text/css">
    #box { color:green; }
    .red { color:red; }
    .blue { color:blue; }
</style>
<script>
    window.onload = function(){
        var styleSheets = document.styleSheets[0];  //获取样式表引用
        var index = styleSheets.length;  //获取样式表中包含样式的个数
        if(styleSheets.insertRule){  //判断浏览器是否支持insertRule()方法
            //使用insertRule()方法在文档内部样式表中增加一个p标签选择符的样式，设置段落背景色为红色，字体颜色为白色，补白为一个字体大小。插入位置在样式表的末尾，
            styleSheets.insertRule("p{background-color:red;color:#fff;padding:1em;}", index);
        }else{  //如果哦浏览器不支持insertRule()方法
            styleSheets.addRule("P", "background-color:red;color:#fff;padding:1em;", index);
        }
    }
</script>
<p>在样式表中增加样式操作</p>

保存页面，在浏览器中预览，效果如下所示：