获取绝对位置

function getPos(obj){
	var l=0;
	var t=0;
	while(obj){
	  l+=obj.offsetLeft;
	  t+=obj.offsetTop;
	  obj=obj.offsetParent;
	};
	return {left:l,top:t};
}

  用一个例子来说明一下:

这是html代码 

<div id="box">
        <div>
            <p></p>
        </div>
</div>

  样式:

#box{500px;height:500px; display:-none;margin:30px; background:red; position:relative;}
#box div{200px;height:200px; background:#ccc;margin:10px;}
#box p{100px;height:100px; background:blue; position:absolute;top:10px;left:10px;}

  然后大家看JS代码:

        var oBox=document.getElementById('box');
	var oDiv=oBox.getElementsByTagName('div')[0];
	var oP=oBox.getElementsByTagName('p')[0];
	//绝对LEFT	
	//offsetParent 定位上的父级
	alert(oP.offsetLeft+oP.offsetParent.offsetLeft);    

  

l+=obj.offsetLeft;
t+=obj.offsetTop;
obj=obj.offsetParent;

这三句话就相当于:l+=obj.offsetParent.offsetLeft;t+=obj.offsetParent.offsetTop;
如果问题,欢迎大家及时指点,一同交流,共同提高
原文地址:https://www.cnblogs.com/wujidns/p/4129606.html