您的位置:首页> 前端教程> CSS操作

insertRule() 方法

2018-10-16 12:16| 作者: admin| 查看: 1665| 评论: 0|来自: 蚂蚁部落

insertRule方法可以在样式表中插入新的规则。

语法结构:

[JavaScript] 纯文本查看 复制代码
stylesheet.insertRule(rule, index)

参数解析:

(1).stylesheet:样式表对象,将新规则插入到对应的样式表中。

(2).rule:必需,要插入的新规则。

(3).index:可选,规定新规则插入的位置,默认值为0,也就是在样式表起始位置插入。

关于stylesheet对象可以参阅CSSStyleSheet 对象详解一章节。

浏览器支持:

(1).IE9+浏览器支持此方法。

(2).edge浏览器支持此方法。

(3).谷歌浏览器支持此方法。

(4).火狐浏览器支持此方法。

(5).opera浏览器支持此方法。

(6).safria浏览器支持此方法。

上面简单语法阐述可能并不能让读者完全掌握此方法的功能。

不用担心,下面就通过代码实例详细演示一下此方法。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
div {
    text-align:center;
    background-color:red;
}
#ant {
    width:120px;
    height:40px;
}
</style>
<script>
window.onload = function () {
  let odiv = document.getElementById("ant");
  let obt = document.getElementById("bt");
  let styleSheet = document.styleSheets[0];
  styleSheet.insertRule("#ant{color:blue}");
}
</script>
</head>
<body>
<div id="ant">蚂蚁部落</div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/16/121749tzk2oktzkfo7mweh.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

通过insertRule方法将div中的字体颜色设置为蓝色。

从上面的代码可以总结出如下信息:

insertRule方法插入的内容是如下形式的样式规则:

[CSS] 纯文本查看 复制代码
#ant{
  color:blue;
}

而不是规则中的一个"条款":

[JavaScript] 纯文本查看 复制代码
color:blue;

上述代码是规则中的一个"条款"而已。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
div {
    text-align:center;
    background-color:red;
}
#ant {
    width:120px;
    height:40px;
}
</style>
<script>
window.onload = function () {
  let odiv = document.getElementById("ant");
  let obt = document.getElementById("bt");
  let styleSheet = document.styleSheets[0];
  styleSheet.insertRule("#ant{color:blue;font-size:12px}");
}
</script>
</head>
<body>
<div id="ant">蚂蚁部落</div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/16/121845rbgpbh4g6m9bgx9h.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代码通过insertRule方法同时设置字体的颜色和大小。

也就是说插入的规则中可以允许有多个"条款",这个很容易接受理解。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
div {
    text-align:center;
    background-color:red;
}
#ant {
    width:120px;
    height:40px;
    color:green;
}
</style>
<script>
window.onload = function () {
  let odiv = document.getElementById("ant");
  let obt = document.getElementById("bt");
  let styleSheet = document.styleSheets[0];
  styleSheet.insertRule("#ant{color:blue;font-size:12px}",1);
}
</script>
</head>
<body>
<div id="ant">蚂蚁部落</div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/16/121909mo33jakeeraaca7a.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

insertRule成功设置了div的字体大小为12px,但是没能将字体颜色设置为蓝色。

这是因为给方法传递了第二个参数,用以规定新规则插入到规则集合中的位置。在插入前,规则集合中有两个规则,位置0表示在集合起始位置插入新规则,1表示在第一条规则的后面插入新规则,如果位置为stylesheet.cssRules.length,就是在集合结尾插入新规则。规则集合可以使用cssRules属性获取。

经过插入后,样式表对象内部规则顺序可以表示如下:

[CSS] 纯文本查看 复制代码
div {
    text-align:center;
    background-color:red;
}
#ant{
    color:blue;
    font-size:12px
}
#ant {
    width:120px;
    height:40px;
    color:green;
}

字体颜色会被#ant中的绿色所覆盖,使用如下代码做一下证实:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
div {
    text-align:center;
    background-color:red;
}
#ant {
    width:120px;
    height:40px;
    color:green;
}
</style>
<script>
window.onload = function () {
  let odiv = document.getElementById("ant");
  let obt = document.getElementById("bt");
  let styleSheet = document.styleSheets[0];
  styleSheet.insertRule("#ant{color:blue;font-size:12px}",1);
  console.log(styleSheet.cssRules);
}
</script>
</head>
<body>
<div id="ant">蚂蚁部落</div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/16/121957qeq93wr3wbri89b8.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

可以看到新插入的规则在规则集合中处于索引位置1处(也就是第二个)。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部