offsetTop offsetLeft offsetWidth offsetHeight

 
 

document　　　　　　　　　　　　　　// Html 的容器对象.

document.documentElement　　　　　　//html 对象

document.body　　　　　　　　　　　　// body 对象

$(document.documentElement).find("body") ;　　　　// Body 对象.

各个高度有各个高度的含义.

document >  document.documentElement > body .

但是 document.height  却很小.

 document.body.clientWidth ==> BODY对象宽度
 document.body.clientHeight ==> BODY对象高度
 document.documentElement.clientWidth ==> 可见区域宽度
 document.documentElement.clientHeight ==> 可见区域高度

如果做前端还是能用得到，留下做备用。
网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidth
jquery
获取浏览器显示区域的高度 ： $(window).height();
获取浏览器显示区域的宽度 ：$(window).width();
获取页面的文档高度 ：$(document).height();
获取页面的文档宽度 ：$(document).width();
获取滚动条到顶部的垂直高度 ：$(document).scrollTop();
获取滚动条到左边的垂直宽度 ：$(document).scrollLeft();

计算元素位置和偏移量 
offset方法是一个很有用的方法，它返回包装集中第一个元素的偏移信息。默认情况下是相对body的偏移信息。结果包含 top和left两个属性。

offset(options, results)
options.relativeTo　　指定相对计 算偏移位置的祖先元素。这个元素应该是relative或absolute定位。省略则相对body。
options.scroll　　是否把 滚动条计算在内，默认TRUE
options.padding　　是否把padding计算在内，默认false
options.margin 　　是否把margin计算在内，默认true
options.border　　是否把边框计算在内，默认true

假设 obj 为某个 HTML 控件

 

obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置，整型，单位像素。

obj.offsetLeft 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置，整型，单位像素。

obj.offsetWidth 指 obj 控件自身的绝对宽度，不包括因 overflow 而未显示的部分，也就是其实际占据（当前看得见）的宽度，整型，单位像素。

obj.offsetHeight 指 obj 控件自身的绝对高度，不包括因 overflow 而未显示的部分，也就是其实际占据（当前看得见）的高度，整型，单位像素。

scrollWidth 是对象的实际内容的宽（可以通过滚动scroll展示出来），不包边线宽度，会随对象中内容的多少改变（内容多了可能会改变对象的实际宽度）。

scrollLeft 出现了横向滚动条的情况下，滚动条拉动的距离

scrollTop 纵向滚动条的情况下，滚动条拉动的距离

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

一、offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。

二、offsetTop 只读，而 style.top 可读写。

三、如果没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串。

offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与 style.height 也是同样道理。

简单地说
clientHeight 就是透过浏览器看内容的这个区域高度。
NS、FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度，只不过当网页内容高度小于等于 clientHeight 时，scrollHeight 的值是 clientHeight，而 offsetHeight 可以小于 clientHeight。
IE、Opera 认为 offsetHeight 是可视区域 clientHeight 滚动条加边框。scrollHeight 则是网页内容实际高度。

同理
clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同，只是把高度换成宽度即可。

说明
以上基于 DTD HTML 4.01 Transitional，如果是 DTD XHTML 1.0 Transitional 则意义又会不同，在 XHTML 中这三个值都是同一个值，都表示内容的实际高度。新版本的浏览器大多支持根据页面指定的 DOCTYPE 来启用不同的解释器

scrollTop 是“卷”起来的高度值，示例：

<div style="width:100px;height:100px;background-color:#FF0000;overflow:hidden;" id="p">
<div style="width:50px;height:300px;background-color:#0000FF;" id="t">如果为 p 设置了 scrollTop，这些内容可能不会完全显示。</div>
</div>
<script type="text/javascript">
var p = document.getElementById("p");
p.scrollTop = 10;
</script>

由于为外层元素 p 设置了 scrollTop，所以内层元素会向上卷，这卷起来的部分就是 scrollTop。

scrollLeft 也是类似道理。

我们已经知道 offsetHeight 是自身元素的宽度，而 scrollHeight 是内部元素的绝对宽度，包含内部元素的隐藏的部分。上述中 p 的 scrollHeight 为 300，而 p 的 offsetHeight 为 100。

scrollWidth 也是类似道理。

IE 和 FireFox 全面支持，而 Netscape 8 和 Opera 7.6 不支持 scrollTop、scrollLeft（document.body.scrollTop、document.body.scrollLeft 除外）。

 

1.clientHeight, clientWidth: 
这两个属性大体上显示了元素内容的象素高度和宽度.理论上说这些测量不考虑任何通过样式表加入 
元素中的页边距,边框等.

2.clientLeft,clientTop: 
这两个返回的是元素周围边框的厚度,如果不指定一个边框或者不定位改元素,他的值就是0.

3.scrollLeft,scrollTop: 
如果元素是可以滚动的,可以通过这俩个属性得到元素在水平和垂直方向上滚动了多远,单位是象素. 
对于不可以滚动的元素,这些值总是0.

4.scrollHeight,scrollWidth: 
不管有多少对象在页面上可见,他们得到的是整体.

5.style.left: 
定位元素与包含它的矩形左边界的偏移量

6.style.pixelLeft: 
返回定位元素左边界偏移量的整数像素值.因为属性的非像素值返回的是包含单位的字符串,例如,30px. 利用这个属性可以单独处理以像素为单位的数值.

7.style:posLetf: 
返回定位元素左边界偏移量的数量值,不管相应的样式表元素指定什么单位.因为属性的非位置值返回的是包含单位的字符串,例如,1.2em   
    
top,pixelTop,posTOp这几个类比就行了.
LEFT:   为从左向右移的位置,即挂件距离屏幕左边缘的距离; 
clientLeft   返回对象的offsetLeft属性值和到当前窗口左边的真实值之间的距离 
offsetLeft   返回对象相对于父级对象的布局或坐标的left值，就是以父级对象左上角为坐标原点，向右和向下为X、Y轴正方向的x坐标 
pixelLeft   设置或返回对象相对于窗口左边的位置
clientWidth 是对象可见的宽度，不包滚动条等边线，会随窗口的显示大小改变。
 offsetWidth 是对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变。
IE6.0、FF1.06+：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5：
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

offsetwidth:是元素相对父元素的偏移宽度。等于border+padding+width
clientwidth：是元素的可见宽度。等于padding+width
scrollwidth:是元素的宽度且包括滚动部分。
offsetLeft:Html元素相对于自己的offsetParent元素的位置 
scrollLeft:返回和设置当前横向滚动务的坐标值

<input type="button" value="点一下" onclick="move()"> 
<div id="d" style="background-color:#ff9966; position:absolute; left:170px; top:100px;width:300;height:300;overflow:scroll" 
onclick="alert('offsetLeft:'+this.offsetLeft)"> 
<div style="height:600;width:600" onclick="alert('offsetLeft:'+this.offsetLeft)"></div> 
</div> 
<script language="javascript"> 
function move() 
{ 
var d=document.getElementById("d") 
a=eval(20) 
d.scrollLeft+=a 
} 
</script>

保存为网页，运行一下，点按钮，滚动条移动 
点击div，先弹出b相对于a的位置，再弹出a相对于窗口的位置