关于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);