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;}
如果我们将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格式
}