关于offsetleft,offsettop的一些资料

clientHeight   获取对象的高度，不计算任何边距、边框、滚动条，但包括该对象的补白。     
  clientLeft   获取   offsetLeft   属性和客户区域的实际左边之间的距离。     
  clientTop   获取   offsetTop   属性和客户区域的实际顶端之间的距离。     
  clientWidth   获取对象的宽度，不计算任何边距、边框、滚动条，但包括该对象的补白。     
  offsetHeight   获取对象相对于版面或由父坐标   offsetParent   属性指定的父坐标的高度。     
  offsetLeft   获取对象相对于版面或由   offsetParent   属性指定的父坐标的计算左侧位置。     
  offsetParent   获取定义对象   offsetTop   和   offsetLeft   属性的容器对象的引用。     
  offsetTop   获取对象相对于版面或由   offsetTop   属性指定的父坐标的计算顶端位置。     
  offsetWidth   获取对象相对于版面或由父坐标   offsetParent   属性指定的父坐标的宽度。     
  offsetX   设置或获取鼠标指针位置相对于触发事件的对象的   x   坐标。     
  offsetY   设置或获取鼠标指针位置相对于触发事件的对象的   y   坐标。

 

假设 obj 为某个 HTML 控件。

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

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

obj.offsetWidth 指 obj 控件自身的宽度，整型，单位像素。

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

我们对前面提到的“上方或上层”与“左方或上层”控件作个说明。

例如：
<div id="tool">
    <input type="button" value="提交">
    <input type="button" value="重置">
</div>

“提交”按钮的 offsetTop 指“提交”按钮距“tool”层上边框的距离，因为距其上边最近的是 “tool” 层的上边框。
“重置”按钮的 offsetTop 指“重置”按钮距“tool”层上边框的距离，因为距其上边最近的是 “tool” 层的上边框。

“提交”按钮的 offsetLeft 指“提交”按钮距“tool”层左边框的距离，因为距其左边最近的是 “tool” 层的左边框。
“重置”按钮的 offsetLeft 指“重置”按钮距“提交”按钮右边框的距离，因为距其左边最近的是“提交”按钮的右边框