我是以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. [转]Traceroute网络排障实用指南（2）

    五.优先级与限速 5.1 Traceroute延时判断影响因素 Traceroute延时包括三点: 探测包到达一个特定路由器的时间 路由器生成IPMI TTL Exceed的时间 ICMP TTL E ...

  2. Easy Number Challenge(暴力，求因子个数)

    Easy Number Challenge Time Limit:2000MS     Memory Limit:262144KB     64bit IO Format:%I64d & %I ...

  3. Winpcap网络编程九之Winpcap实战,ARP协议获得MAC表及主机通信

    大家好,本次我们须要完毕的任务是: 完毕两台主机之间的数据通信(数据链路层) 仿真ARP协议获得网段内主机的MAC表 使用帧完毕两台主机的通信(Hello! I'm -) 声明:本文章的目的是为大家的 ...

  4. 实现怎样支持Android重力感应器Sensor编程

    添加当重力变化时的处理函数 在创建监听器时调用的函数 doSomething(x, y, z) 是自己定义的方法. 当手机倾斜方向改变时,监听器会调用该方法. 我们要做的,就是填充该方法,用于在重力发 ...

  5. synchronized关键字的用法

    synchronized用于给方法或者块加锁用的,只有获得该对象或者块的锁的对象才能够执行里面的代码,否则将阻塞在那里,等待该锁被释放,然后获得该锁继续执行.比如下面模拟售票的代码: /** * 模拟 ...

  6. 工具使用 eclipse the user operation is waiting for Building Working to be completed。

    问题定位: 在使用 IDE开发时,学习一个新事物如语言,框架,出现错误时暂时无法判断是新写的代码错还是IDE使用错: 则编写简单的未使用该技术的test.java ,运行后还有异常出现,则不是代码问题 ...

  7. Spring-----9、容器中bean的生命周期

    转载自:http://blog.csdn.net/hekewangzi/article/details/45648771

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

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

  9. linux 内核开发基础

    开发特点 不需要第三方库支持 使用GNU C 没有内存保护机制 杜绝浮点数 栈区固定 必须关注并发及同步 注意可移植性

  10. MySql小知识点

    1.查看MySql是什么编码 show create table tablename;