我是以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. iOS开发-CGAffineTransformMakeRotation改变了中心解决的方法

    坑爹的.  为了这个问题折腾了2个小时. 恼.. 今天在写一个时钟demo的时候, 时针的旋转用到了CGAffineTransformMakeRotation, 按理说. 图像的旋转是以图像本身的中心 ...

  2. 2014年百度之星资格赛第三题Xor Sum

    Problem Description Zeus 和 Prometheus 做了一个游戏,Prometheus 给 Zeus 一个集合,集合中包括了N个正整数,随后 Prometheus 将向 Zeu ...

  3. [Manacher][HDU3613][Best Reward]

    题意: 将一段字符串 分割成两个串 如果分割后的串为回文串,则该串的价值为所有字符的权值之和(字符的权值可能为负数),否则为0. 问如何分割,使得两个串权值之和最大 思路: 裸的: 枚举分割点,计算, ...

  4. javax inect

    Spring 3 and JSR-330 @Inject and @Named example By mkyong | September 16, 2012 | Viewed : 86,399 tim ...

  5. sublime 前端开发工具

    http://code.kpman.cc/2014/10/14/sublime-text-3-mac-%E6%8C%87%E5%8D%97/ gif 屏幕录制:http://recordit.co/ ...

  6. 使用SQLCipher加密数据库

      Xcode中集成了免费的sqlite,但是不提供加密的模块,突然有一天,蛋疼的客户要求把数据进行加密,于是乎就寻找使用简单并且可以把数据迁移过度到加密数据库的框架. SQLCipher是第三方的开 ...

  7. 重写TextView，实现圆形背景，文本居中显示

    最近,在做考试试题排版,产品提出题号希望显示成圆形背景,序号文本居中显示. (有点问题:文本没有绝对居中,暂时没做处理.) 为此,我采取的方式是重写TextView的onDraw方法,绘制一个圆形背景 ...

  8. DataSet 图解

    DataSet层次结构中的类请参见表所示: 类 说明 DataTableCollection 包含特定数据集的所有DataTable对象 DataTable 表示数据集中的一个表 DataColumn ...

  9. linux配置加载顺序

    linux加载配置项时通过下面方式 首先 加载/etc/profile配置 然后 加载/ect/profile.d/下面的所有脚本 然后 加载当前用户 .bash_profile 然后 加载.bash ...

  10. pcl1.7.2_vs2013_x64工程配置

    pcl1.7.2_vs2013_x64工程配置 C:\Program Files\PCL 1.7.2\include\pcl-1.7;C:\Program Files\PCL 1.7.2\3rdPar ...