我是以chrome浏览器做的研究。

先看一段代码：

<script>

    window.addEventListener('DOMContentLoaded',function(){

        var node1 = document.querySelector('#father');

        var node2 = document.querySelector('#child');

        console.log('offsetTop==offsetHeight==scrollTop==scrollHeight==clientHeight');

        console.log('father: '+node1.offsetTop+'=='+node1.offsetHeight+'=='+node1.scrollTop+'=='+node1.scrollHeight+'=='+node1.clientHeight);

        console.log('child: '+node2.offsetTop+'=='+node2.offsetHeight+'=='+node2.scrollTop+'=='+node2.scrollHeight+'=='+node2.clientHeight);

        /**

            offsetTop:是本元素距上层元素且元素设置了postion=relative的距离，如果所有父级元素都没有设置postion。就是距body的距离。

            计算：offsetTop = margin+top

            offsetHeight:是本元素底部到本元素顶部的距离。

            计算：offsetHeight = content+padding+border

            scrollTop:是浏览器可视窗口顶端距页面顶部的距离。

            计算： 无

            scrollHeight: 是容器内所有元素及子元素的高度之和，如果没有子元素，即为自身高度+padding。

            计算： 有子元素：包括所有子元素的(content+padding+border+margin)之和

                   无子元素：content+padding

            clientHeight: 是自身容器的高度。除去滚动条的宽度。

            计算： content.height+padding-滚动条的宽度

        */

    });

</script>

</head>

<body>

    <div style="position:relative;" id="superFather">

        <div style="width:500px;height:1000px;background:red;overflow:auto;" id="father">

            <!-- <div style="width:500px;height:500px;background:green;padding:10px;margin:60px;border:5px solid #2EE008; opacity:0.5;position:absolute;top:50px;" id="child">

            </div> -->

            <div style="width:800px;height:500px;background:green;padding:10px;margin:60px;border:5px solid #2EE008; opacity:0.5;" id="child">

            </div>

            <div style="width:800px;height:500px;background:green;padding:10px;margin:60px;border:5px solid #2EE008; opacity:0.5;" id="child">

            </div>

            <div style="width:800px;height:500px;background:green;padding:10px;margin:60px;border:5px solid #2EE008; opacity:0.5;" id="child">

            </div>

       </div>

    </div>

</body>

所以，根据上面的解释输出结果为：

offsetTop:  farther=0,child = margin(60)

offsetHeight: farther = content(1000),child = content(500)+padding(20)+border(10)

scrollTop: 0,0

scrollHeight: farther=500*3+60*4+20*3+10*3,500+10*2

clientHeight: 100-17,500+10*2

所以整体输出：

总结一下算法：

offsetHeight:content+padding+border

offsetTop: margin+top

scrollHeight/clientHeight: 子元素没有超出情况下：content+padding 只是clientHeight在有滚动条的情况下，是要去除滚动条宽度。子元素超出之后：所有子元素的(content+padding+border+margin)之和

scrollTop:浏览器可视区域顶部到页面顶部的距离

参考链接：http://www.softwhy.com/forum.php?mod=viewthread&tid=8298

关于offsetTop offsetHeight clientHeight scrollHeight scrollTop的区别研究的更多相关文章

  1. offsetTop,offsetHeight,clientHeight,scrollHeight,scrollTop区别

    这些高度相信很多同学都搞不清楚吧.这里我通过本地测试,发现了区别. 以聊天窗口为例. 元素(class='content')高度444px,其中上下padding分别是10px,margin为0.距离 ...

  2. 彻底搞清楚DOM元素的height,offsetHeight,clientHeight,scrollHeight

    测试用例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  3. [DOM基础]offsetHeight,clientHeight,scrollHeight,innerHeight,outerHeight等属性的解释

    由于经常搞混这几个属性,所以查找资料总结一下,方便以后翻出来温习. 一.偏移量-以offset开头的 1.offsetHeight:元素在垂直方向上占用的空间大小,像素.包括元素的高度.可见的水平滚动 ...

  4. offsetHeight,clientHeight,scrollHeight,offsetY等属性的理解

    el.offsetHeight = height + padding + border(滚动条是在边框内的,自然也包括在内) el.clientHeight = 可视化看到的高度 (就是content ...

  5. jquery 对象的 height、innerHeight、outerHeight 的区别以及DOM 元素的 clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

    前言:jquery 对象的 height.innerHeight.outerHeight,还有 DOM 元素的 clientHeight.offsetHeight.scrollHeight.offse ...

  6. offsetTop/offsetHeight scrollTop/scrollHeight 的区别

    offsetTop/offsetHeight   scrollTop/scrollHeight  这几个属性困扰了我N久,这次一定要搞定. 假设 obj 为某个 HTML 控件. obj.offset ...

  7. 理解clientX、clientY、offsetLeft、event.offsetTop、offsetWidth、offsetHeight、clientWidth、clientHeight、scrollTop、scrollHeight

    一.clientX和clientY 事件发生时,鼠标距离浏览器的可视区域的X.Y轴的位置,不包含滚动条的区域的部分.就算是页面进行了滚动,鼠标的坐标值还是参考可视区域的. 二.offsetLeft和o ...

  8. 搞懂offsetY、offsetTop、scrollTop、offsetHeight、scrollHeight

    先搞offsetTop,最难懂的就是它了 官方解释:返回当前元素的上边界到它的包含元素的上边界的偏移量,以像素为单位.这真TM坑爹啊!有木有!经过仔细研究查找得出结论:offsetTop是相对于离它最 ...

  9. offsetHeight, clientHeight与scrollHeight的区别

      在网上搜了一下,结论非常笼统,讲IE从不讲版本,因此自己做了测试并上传结论.以下结论皆是在标准模式下测试通过的,没有测试quirk模式. clientHeight 大部分浏览器对 clientHe ...

随机推荐

  1. mysql用户修改登录密码及开启远程登录

    一.修改用户登录密码: mysql> show databases;ERROR 1820 (HY000): You must SET PASSWORD before executing this ...

  2. RMAN数据库恢复 之归档模式有(无)备份-丢失数据文件的恢复

    1.归档模式有备份,丢失数据文件的恢复归档模式有备份,不管丢失什么数据文件,直接在RMAN下RESTOER--->RECOVER--->OPEN即可. RMAN> STARUP MO ...

  3. LINQ 基本子句之二 join

    Join子句据说可以实现3中连接关系. 1.内部连接——元素的连接关系必须同时满足被连接的两个数据源 2.分组连接 3.左外连接 1.最基本的,内部连接,类似于sql中inner join. 由于st ...

  4. AFNetworking自我总结

    AFNetworking 简介 目前国内开发网络应用使用最多的第三方框架 是专为 Mac OS & iOS 设计的一套网络框架 对 NSURLConnection 和 NSURLSession ...

  5. GET & POST 登录

    GET 登录 @property(nonatomic,assign)long  long hasReceivedContentLength; - (void)getLogin { NSString * ...

  6. hdu2206IP的计算

    Problem Description 在网络课程上,我学到了很多有关IP的知识.IP全称叫网际协议,有时我们又用IP来指代我们的IP网络地址,现在IPV4下用一个32位无符号整数来表示,一般用点分方 ...

  7. JS 一个修改ul的小示例

    javascript提供了innerHTML属性可以获取和设置对象的文本内容. 下面实例演示——单击<ul>下的<li>标签后,改变其显示值: 1.HTML结构 <ul  ...

  8. MySQL server has gone away报错

    1.最近做插入数据库,然后一直报一个错.mysql server has gone away.(如下图) 查了好多资料,终于解决了.. 1.可能是连接超时..进入php.ini,修改wait_time ...

  9. MySQL的表分区（转载）

    MySQL的表分区(转载) 一.什么是表分区 通俗地讲表分区是将一大表,根据条件分割成若干个小表.mysql5.1开始支持数据表分区了. 如:某用户表的记录超过了600万条,那么就可以根据入库日期将表 ...

  10. Android 6.0权限问题

    Android 6.0 open failed: EACCES (Permission denied) 对于6.0+权限问题,报错如上: 解决方案: Android 6.0 (Marshmallow) ...