取得非绝对定位的元素的位置

关于offsetTop、offsetLeft、offsetWidth、offsetHeight的说明

最近群里有好群民在问关于offsetTop、offsetLeft、offsetWidth、offsetHeight等的意思及其用法，现简单总结如下：

假设 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 指“重置”按钮距“提交”按钮右边框的距离，因为距其左边最近的是“提交”按钮的右边框

offsetParent：大多说offsetParent返回body

例子：
取得非绝对定位的元素的位置
var offset = function (o) {
//设置定位
    var $x = $y = 0;
    do { $x += o.offsetLeft, $y += o.offsetTop; }
    while (o = o.offsetParent);
    return { x : $x, y : $y };
};

var pos = offset(document.getElementById("元素id"));

alert(pos.x + ":" + pos.y);