首页 > 编程笔记 > JavaScript笔记 > JS操作CSS样式 阅读:1,213

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

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

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

styleSheets 表示样式表引用,参数说明如下:
Firefox 支持使用 insertRule() 方法添加样式。用法如下:

styleSheet.insertRule(rule, [index])

参数说明如下:

示例

在下面示例中,先在文档中定义一个内部样式表,然后使用 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>
保存页面,在浏览器中预览,效果如下所示:

编程帮,一个分享编程知识的公众号。跟着站长一起学习,每天都有进步。

通俗易懂,深入浅出,一篇文章只讲一个知识点。

文章不深奥,不需要钻研,在公交、在地铁、在厕所都可以阅读,随时随地涨姿势。

文章不涉及代码,不烧脑细胞,人人都可以学习。

当你决定关注「编程帮」,你已然超越了90%的程序员!

编程帮二维码
微信扫描二维码关注

所有教程

优秀文章