offsetLeft,offsetTop,offsetParent详解

1.offsetLeft/offsetTop

在页面任一元素的offsetLeft总是找到离其最近的已经定位的元素定位，如果没有，就根据根节点body定位，然后获取其left值

<div id=”div2″>
<div id=”div3″>
<div id=”div4″></div>
</div>
</div>

css:
#div2{width:400px;height:400px;background:#0f0;margin-left:10px}
#div3{width:300px;height:300px;background:#00f;margin-left:10px}
#div4{width:200px;height:200px;background:#000;margin-left:10px;}

div4的offsetLeft根据body定位：10+10+10=30

如果我们将css做如下改变

css:
#div2{width:400px;height:400px;background:#0f0;position:relative;margin-left:10px}
#div3{width:300px;height:300px;background:#00f;margin-left:10px}
#div4{width:200px;height:200px;background:#000;margin-left:10px;}

div4的offsetLeft根据div2定位：10+10=20

offsetTop同理

2.offsetParent

其实offsetParent，返回一个元素离其最近的已经定位的元素，如果没有就返回body,其概念和offsetLeft差不多

3.实例：封装一个函数获得任一元素在页面的位置

var GetPosition= function (obj)
{
var left = 0;
var top = 0;
while(obj.offsetParent)//如果obj的有最近的父级定位元素就继续
{
left += obj.offsetLeft;//累加
top += obj.offsetTop;
obj=obj.offsetParent;//更新obj,继续判断新的obj是否还有父级定位，然后继续累加
}
return {“left”:left,”top”:top}//返回json格式
}