js给html添加新的样式,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 个字体大小。

#box { color:green; }

.red { color:red; }

.blue { color:blue; }

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);

}

}

在样式表中增加样式操作

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