码迷,mamicode.com
首页 > 其他好文 > 详细

scrollWidth,offsetWidth,clientWidth,width;scrollHeight,offsetHeight,clientHeight,height;offsetTop,scrollTop,top;offsetLeft,scrollLeft,left还有谁

时间:2017-04-02 18:32:51      阅读:159      评论:0      收藏:0      [点我收藏+]

标签:系统   firefox   top   script   parent   cli   inner   滚动   oct   

  题中的那么多属性让人头都大了,他们到底是什么意思?不同浏览器的实现是一样的吗?以下所有结论来自chrome版本 53.0.2785.89 (64-bit)和firefox版本52.0.2,操作系统ubuntu16.04的测试,关于IE及其它浏览器并没有考虑。

一、谈谈XXWidth

  1、width

  这个是style对象的一个属性,跟你在css样式里写的那个width的值是一样的,注意他是带单位的。

  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1</title>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            border: 20px;
            margin: 20px;
            padding: 20px;
            background: red;
        }
    </style>
</head>
<body>
    <div id="div"></div>
    <script type="text/javascript">
        var link = document.getElementsByTagName("style")[0];
        var sheet = link.sheet||link.styleSheet;
        var rules = sheet.rules || sheet.cssRules;
        console.log(rules[0].style.width);
    </script>
</body>
</html>

 

  上述例子中结果都是 100px,当然chrome和firefox在获取CSSStyleSheet对象和cssRules对象上还有区别,chorme由sheet和rules得到,firefox由styleSheet 和cssRules得到。

  2、clientWidth

  这个值表示的是可用区域的宽度,测试没有竖向滚动条时两个浏览器对这个属性保持一致,有滚动条时,chrome认为滚动条是15px,ff认为是10px;而且通过document.body.clientWidth 得到的值和通过document.documentElement.clientWidth得到的值不同,前者等于css的width+左右padding,后者仍然是可用区的宽。有人将这个属性交可视区宽,本人认为不对,可以理解成可用区宽。自行体会,注意padding也是可用的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>clientWidth</title>
    
    <style type="text/css">
        body{
            margin: 0;
            padding: 20px;
            width: 5000px;
            /* height: 10000000px; */
        }
    </style>
</head>
<body>
    <script type="text/javascript">
        console.log(document.documentElement.clientWidth);
    </script>
</body>
</html>

 

  我测试结果两个都是1319(你的测试可能不一样,浏览器的宽度不一样);

  如果出现竖向滚动条(去掉height注释),chrome值为1304,firefox值为1309。

  如果用body代替上述的documentElement则,结果为5040. 如果设置box-sizing:border-box则值为5000.此处可以用标准盒子模型解释。

  3、offsetWidth

  表示一个对象的实际宽度。

  

<!DOCTYPE html>
<html>
<head>
    <title>offsetWidth</title>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            margin: 10px;
            padding: 13px;
            background: red;
        }
    </style>
</head>
<body>
    <div></div>
    <script type="text/javascript">
        var div = document.getElementsByTagName("div")[0];
        console.log(div.offsetWidth);
    </script>
</body>
</html>

  得到值为126,加上box-sizing: border-box;为100

  看看有滚动条的情况

<!DOCTYPE html>
<html>
<head>
    <title>offsetWidth</title>
    <style type="text/css">
        .outer{
            width: 100px;
            height: 100px;
            margin: 10px;
            padding: 13px;
            background: red;
            box-sizing: border-box;
            overflow: scroll;
        }
        .inner{
            width: 1000px;
            height: 1000px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner" id="inner"></div>
    </div>
    <script type="text/javascript">
        var div = document.getElementById("inner");
        console.log(div.offsetWidth);
    </script>
</body>
</html>

  发现仍然是表示真实宽度。

  4、scrollWidth

  表示的是对象真实宽度,这个和offsetWidth有什么区别呢,我得测试测试。没区别吗?我将上面的offsetWidth换成scrollWidth后发现还是1000啊!在测试,要是一样搞两个干嘛呢,一定有区别的。

<!DOCTYPE html>
<html>
<head>
    <title>scrollWidth</title>
    <style type="text/css">
        .outer{
            width: 100px;
            height: 100px;
            margin: 10px;
            padding: 13px;
            background: red;
            box-sizing: border-box;
            overflow: scroll;
        }
        .inner{
            width: 1000px;
            height: 1000px;
            border: 13px solid red;
            padding: 12px;
            margin:4px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner" id="inner"></div>
    </div>
    <script type="text/javascript">
        var div = document.getElementById("inner");
        console.log(div.scrollWidth);
    </script>
</body>
</html>

  一不做,二不修,border,margin,padding全上。发现offsetWidth为1050,说明它算了padding和borer,而scrollWidth为1024,只算了padding没算border。

  哦!我知道了,原来offsetWidth算边宽,而scrollWidth不算边宽啊。

  二、谈谈XXtop

  上面谈得是与大小相关的,下面谈与位置相关的。

  1、top

  这个是style的属性,没有定义返回“”,定义在link或者style中的拿不到。

  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>top</title>
    <style type="text/css">
    </style>
</head>
<body>
    <div id="div" style="width: 100px;height: 100px;background: red;position: relative;top: 20px"></div>
</body>
<script type="text/javascript">
    var div = document.getElementById("div");
    console.log(div.style.top);
</script>
</html>

  返回20px,带单位。

  2、offsetTop

  他更top差不多,但是是返回的数字,而且一定有值。就是这样

  技术分享

  结果我测试了一下,发现不对啊,就是上面的那个例子,我直接改了个offsetTop,你猜怎么着,结果是28不是20,然后我给了一个body{margin:0;}, 然后就是20了,你说奇怪不奇怪。我的理解是。因为上面是position:relative;是相对自己定位的,所以它本来的上边距离外面那个宽有8px,8px是body的margin引起的。而offsetTop考虑了这个8,是从父元素的最最外边算得,不是border那里。

  3、scrollTop

  表示的是被卷去的高度。比如下面就是0,因为获取的时候还没卷。

  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>top</title>
    <style type="text/css">
        body{
            margin: 10px;
            height: 1000000000000px;
        }
    </style>
</head>
<body>
    <div id="div" style="width: 100px;height: 100px;background: red;position: relative;top: 20px"></div>
</body>
<script type="text/javascript">
    var b = document.body;
    console.log(b.scrollTop);
</script>
</html>

 

三、关于xxheight和xxleft,offsetParent

  xxheight和xxleft跟上面的差不多,对比一下就知道了。offsetParent和parentNode是有区别的,看这里:http://blog.csdn.net/u012552049/article/details/45390181,offset相对于谁偏移,相对于谁就是offsetParent,这个元素一般来说是用了定位的元素。

参考:

  • http://www.cnblogs.com/kongxianghai/p/4192032.html
  • http://blog.csdn.net/woxueliuyun/article/details/8638427
  • http://wenku.it168.com/d_000647093.shtml      

scrollWidth,offsetWidth,clientWidth,width;scrollHeight,offsetHeight,clientHeight,height;offsetTop,scrollTop,top;offsetLeft,scrollLeft,left还有谁

标签:系统   firefox   top   script   parent   cli   inner   滚动   oct   

原文地址:http://www.cnblogs.com/floor/p/6659422.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!