浅析offsetLeft,Left,clientLeft之间的区别

假设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解释不同造成的）

我们知道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
大家对clientHeight都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。

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

scrollHeight
IE、Opera认为scrollHeight是网页内容实际高度，可以小于clientHeight。
NS、FF认为scrollHeight是网页内容高度，不过最小值是clientHeight。

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

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

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

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