cssRuels和rules的区别

最新推荐文章于 2022-08-01 10:44:44 发布

Marvel__Dead

最新推荐文章于 2022-08-01 10:44:44 发布

阅读量2.5k

点赞数

分类专栏： CSS3 文章标签： css3

本文链接：https://blog.csdn.net/Marvel__Dead/article/details/53047891

版权

CSS3 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

对于cssRules和rules的区别：
在计算cssRules和rules的长度的时候，cssRules的单位是是对整条规则，而rules的单位是一个选择器。
下面进行代码演示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .first,.second{
            margin-top: 5px;
            width: 200px;height: 100px;
            background: #ff8436;
        }
        .third{
            margin-top: 5px;
            width: 200px;height: 100px;
            background: #7CF45C;
        }
    </style>

</head>
<body>
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
<script>
    var cssrules=document.styleSheets[0].cssRules;
    var rules=document.styleSheets[0].rules;
    //测试长度
    alert("cssRules: "+cssrules.length);
    alert("rules: "+rules.length);
    //在IE下的答案是cssRules:2   rules:3
    //直接看答案吧！
    var resultCssrules="resultCssrules: ";
    var resultrules="resultrules: ";
    for(var i=0;i<cssrules.length;i++){
        resultCssrules+=(i+1)+"#"+cssrules[i].selectorText+"\n";
    }
    for(i=0;i<rules.length;i++){
        resultrules+=(i+1)+"#"+rules[i].selectorText+"\n";
    }
    alert(resultCssrules);
    alert(resultrules);
</script>
</body>
</html>

对于cssRules和rules一般我们用的就是cssRules选择器，rules的实现对于各浏览器的有偏差，不唯一，而cssRules是唯一的。指整条规则如:

.first,.second{
 margin-top: 5px;
width: 200px;height: 100px;
background: #ff8436;
}

而rules对于浏览器实现来说，有些是指一个选择器，而有些是指一个规则：
就用上面这个css样式来说：
针对选择器就会被分解为:

.first{
 margin-top: 5px;
width: 200px;height: 100px;
background: #ff8436;
}

和

.first,.second{//对，你没有看错，这就是IE的实现方式。.first和.first,.second重复了，明显实现得不合理！！
 margin-top: 5px;
width: 200px;height: 100px;
background: #ff8436;
}

所以当要动态添加css样式时就选择用cssRuels而不用rules.

Marvel__Dead

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
cssRuels和rules的区别

对于cssRules和rules的区别：在计算cssRules和rules的长度的时候，cssRules的单位是是对整条规则，而rules的单位是一个选择器。下面进行代码演示:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style>
复制链接

扫一扫