scrollTop、offsetHeight和offsetTop等属性用法详解--转转转

scrollTop、offsetHeight和offsetTop等属性用法详解:

标题中的几个相关相关属性在网页中有这大量的应用，尤其是在运动框架中，但是由于有些属性相互之间的概念比较混杂或者浏览器兼容性问题，导致掌握起来比较有难度，下面就介绍一下相关属性的用法。

先来看一张比较经典的示意图:

下面结合各上图介绍一下各个属性的作用:

一.offsetTop属性:
此属性可以获取元素的上外缘距离最近采用定位父元素内壁的距离，如果父元素中没有采用定位的，则是获取上外边缘距离文档内壁的距离。所谓的定位就是position属性值为relative、absolute或者fixed。
返回值是一个整数，单位是像素。
此属性是只读的。
二.offsetLeft属性:
此属性和offsetTop的原理是一样的，只不过方位不同，这里就不多介绍了。
三.offsetWidth属性:
此属性可以获取元素的宽度，宽度值包括:元素内容+内边距+边框。不包括外边距和滚动条部分。
返回值是一个整数，单位是像素。
此属性是只读的。
四.offsetHeight属性:
此属性可以获取元素的高度，宽度值包括:元素内容+内边距+边框。不包括外边距和滚动条部分。
返回值是一个整数，单位是像素。
此属性是只读的。
五.clientWidth属性:
此属性可以返回一个元素的宽度值，值是:元素的内容+内边距。不包括边框、外边距和滚动条部分。
返回值是一个整数，单位是像素。
此属性是只读的。
六.clientHeight属性:
此属性可以返回一个元素的高度值，值是:元素的内容+内边距。不包括边框、外边距和滚动条部分。
返回值是一个整数，单位是像素。
此属性是只读的。
七.scrollLeft属性:
此属性可以获取或者设置对象的最左边到对象在当前窗口显示的范围内的左边的距离，也就是元素被滚动条向左拉动的距离。
返回值是一个整数，单位是像素。
此属性是可读写的。
八.scrollTop属性: 
此属性可以获取或者设置对象的最顶部到对象在当前窗口显示的范围内的顶边的距离，也就是元素滚动条被向下拉动的距离。
返回值是一个整数，单位是像素。
此属性是可读写的。
九.scrollHeight属性:
此属性获取对象的实际尺寸。

网页可见区域高：document.body.clientHeight
网页正文全文高：document.body.scrollHeight
网页可见区域高（包括边线的高）：document.body.offsetHeight
网页被卷去的高：document.body.scrollTop
屏幕分辨率高：window.screen.height

对上面信息的理解：
clientHeight就是当前能看到的页面大小，它的值随着浏览器的大小变化！简单的可以理解为浏览器窗口高度－标题栏、菜单栏、工具栏、地址栏、状态栏等高度(一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关)。不包括boder的宽度,如果区域内带有滚动条,还应该减去横向滚动条不可用的高度,正常的是17px；

scrollHeight网页的内容高度。这个值比较麻烦，IE和火狐中大小有很大不同！
IE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。
NS、FF 认为 scrollHeight 是网页内容高度，不过最小值是 clientHeight。
以上都是百度百科中给出的解释，个人认为scrollHeight是网页的内容高度，即我们使用滑块所能看到的内容高度即可。

offsetHeight为模块的高度+边框的大小。
IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。
NS、FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。

scrollTop网页卷起来的高度（网页向上移动过程中，跑上去看不见的部分）。可以理解为scroll top offset是滚动条相对于其顶部的偏移。

window.screen.height是你电脑的屏幕宽度，即分辨率高。

以下转载自http://www.cnblogs.com/fanxiaowu/p/4452702.html 

：

假设 obj 为某个 HTML 控件。

obj.offsetTop   obj距离上方或上层控件的位置，整型，单位像素。

obj.offsetHeight   obj自身的高度，整型，单位像素。

 

offsetTop 可以获得 HTML 元素距离上方或外层元素的位置，style.top 也是可以的，二者的区别是：

一、offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。
二、offsetTop 只读，而 style.top 可读写。
三、如果没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串。

 

scrollTop 是“卷”起来的高度值，示例：
<div style="100px;height:100px;overflow:hidden;" id="p">
    <div style="50px;height:300px;" id="t">如果为 p 设置了 scrollTop，这些内容可能不会完全显示。</div>
</div>
<script type="text/javascript">
    var p = document.getElementById("p");
    p.scrollTop = 10;
</script>
由于为外层元素 p 设置了 scrollTop，所以内层元素会向上卷。

 

scrollHeight 与 offsetHeight

offsetHeight是自身元素的高度，scrollHeight是 自身元素的高度+隐藏元素的高度(是不是可以理解成内层元素的offsetHeight值？？？)。

<div id="container" style=" 100px; height:100px; overflow:auto;">

    <p style=" height:250px; ">
    别再做情人 做只猫 做只狗 不做情人 做只宠物至少可爱迷人 和你相交不浅无谓明日会被你憎
    </p>
</div>
<script>
    alert(document.getElementById("container").offsetHeight);
    alert(document.getElementById("container").scrollHeight);
</script>

将依次输出100，250。因为已经指定了元素的height为100px，所以offsetHeight始终为100px；内部元素为 250px，而容器元素只有100px，那么还有150px的内容它无法显示出来，但它却是实际存在的，所以scrollHeight值为 100+150=250。

转：http://www.cnblogs.com/fullhouse/archive/2012/01/16/2324131.html


　　　　　　　alert("网页可见区域宽：" + 'document.body.clientWidth.'+document.body.clientWidth);
            alert("网页可见区域高：" + 'document.body.clientHeight.'+document.body.clientHeight);
            alert("网页可见区域高 (包括边线的宽)：" + 'document.body.offsetWidth.'+document.body.offsetWidth);
            alert("网页可见区域高 (包括边线的高)：" + 'document.body.offsetHeight.'+document.body.offsetHeight);
            alert("网页正文全文宽：" + 'document.body.scrollWidth.'+document.body.scrollWidth);
            alert("网页正文全文高：" + 'document.body.scrollHeight.'+document.body.scrollHeight);
            alert("网页被卷去的高：" + 'document.body.scrollTop.'+document.body.scrollTop);
            alert("网页被卷去的左：" + 'document.body.scrollLeft.'+document.body.scrollLeft);
            alert("网页正文部分上：" + "window.screenTop."+window.screenTop);
            alert("网页正文部分左：" + "window.screenLeft."+window.screenLeft);
            alert("屏幕分辨率的高：" + "window.screen.height."+window.screen.height);
            alert("屏幕分辨率的宽：" + "window.screen.width."+window.screen.width);
            alert("屏幕可用工作区高度：" + "window.screen.availHeight."+window.screen.availHeight);
            alert("屏幕可用工作区宽度：" +  "window.screen.availWidth." +window.screen.availWidth);