您当前的位置:首页 > 计算机 > 编程开发 > JavaScript

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

时间:03-07来源:作者:点击数:

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>

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

方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门