offset、offsetLeft，offsetWidth和offsetHeight的使用方法

转自：http://www.cnblogs.com/rixinren/archive/2010/04/25/1720680.html

假设 obj 为某个 HTML 控件。

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

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

obj.offsetWidth 指 obj 控件自身的绝对宽度，不包括因 overflow 而未显示的部分，也就是其实际占据的宽度，整型

obj.offsetHeight 指 obj 控件自身的绝对高度，不包括因 overflow 而未显示的部分，也就是其实际占据的高度，整型

我们对前面提到的 offsetParent 作个说明。

offsetParent 获取定义对象 offsetTop 和 offsetLeft 属性的容器对象的引用。offsetTop 与 offsetParent 很复杂，不同浏览器有不同解释，浮动一下解释又不同了，所以我们一般只要理解通过二者可以获得控件在浏览器中的绝对位置即可。

以上属性在 FireFox 中也有效。

另外：我们这里所说的是指 HTML 控件的属性值，并不是 document.body，document.body 的值在不同浏览器中有不同解释（实际上大多数环境是由于对 document.body 解释不同造成的，并不是由于对 offset 解释不同造成的），点击这里查看不同点。

这几个参数来制作图片的滚动，文字的滚动

网页可见区域宽： 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;