我是以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. java中反射学习整理

    转载请注明:http://blog.csdn.net/j903829182/article/details/38405735 反射主要是指程序能够訪问.检測和改动它本身的状态或行为的一种能力. jav ...

  2. 用Unity做的一个小游戏，仿照一个样例写的，个人认为文章写的不错，哈哈

  3. dom4j解析XML的CURD操作

    在开发JavaWeb项目中通常是利用XML配置文件来提高应用程序的访问效率,而在配置XML的同时,更多时候是对XML进行解析. 一.解析XML配置文件有两种机制: DOM和SAX的机制: DOM是将整 ...

  4. onvif规范 中文介绍

    什么是ONVIF ? ONVIF规范描述了网络视频的模型.接口.数据类型以及数据交互的模式.并复用了一些现有的标准,如WS系列标准等. ONVIF规范的目标是实现一个网络视频框架协议,使不同厂商所生产 ...

  5. JavaScript sort()方法比较器

    当我们想把一个由数字组成的数组进行简单的排序时,可能会想到sort()方法: var arr = [2 , 3, -1, -107, -14, 1]; console.log(arr.sort()) ...

  6. 深入浅出SlidingMenu

    如果想直接查看源码的话可以从我的Github上下载查看:https://github.com/zhanghuijun0/demo-for-android/tree/master/SlidingMenu ...

  7. VS2003,安装程序检测到另一个程序…

    昨天在安装Visual Studio .Net 2003时,出现一个对话框   "安装程序检测到另一个程序要求计算机重新启动.必须重新启动计算机后才能安装visual studio.net系 ...

  8. Mac下Apache服务器配置

    一.Apache服务器 1. 使用最广的 Web 服务器 2. Mac自带,只需要修改几个配置就可以,简单,快捷 3. 有些特殊的服务器功能,Apache都能很好的支持 目的:让有一个自己专属的测试环 ...

  9. myeclipse内存不足有关问题

    myeclipse内存不足有关问题 myeclipse内存不足问题 使用myeclipse8.5出现如下问题:MyEclipse has detected that less than 5% of t ...

  10. UI事件之load

    load事件属于CSS3规范中的UI事件,load事件处理程序在页面元素和资源(html/script/link/img等)全部加载完成后在window上触发,或在img元素加载完成后再img元素上触 ...