获取元素相对于屏幕距离的方法

作者：

2012-04-13 20:11:57

372

珠峰培训课堂示例 http://www.zhufengpeixun.cn

请写一个获取元素相对于屏幕距离（注意，是相对于屏幕的，不是相对于定位参照物的）的方法：getPos()

用法：var L = getPos(obj).x; var R = getPos(obj).y;

function getPos(ele){

var pos={x:null,y:null}

var offsetParent=ele.offsetParent;

while(offsetParent){

pos.x+=ele.offsetLeft;

pos.y+=ele.offsetTop;

ele=ele.offsetParent;

offsetParent=ele.offsetParent;

//if(offsetParent==document.body)

//return pos;

//只有body没有offsetParent，body已经是顶级元素了

}

return pos;

}

测试示例如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

body{ }

#outer{

width:300px; background:red; height:300px; position:relative}

#inner{width:200px; background:yellow; height:200px; position:absolute;top:50px;}

#div3{

width:500px;

height:200px;

background:black;

color:#fff;

}

#inner2{

width:100px;

height:100px;

margin:50px;

background:green;

}

</style>

</head>

<body>

</div>

</body>

</html>

var outer=document.getElementById('outer');

var inner=document.getElementById('inner');

var div3=document.getElementById('div3');

div3.innerHTML+=inner.offsetParent.id+'<br/>';

div3.innerHTML+=outer.offsetTop+'<br/>';

div3.innerHTML+=document.body.offsetTop+'<br/>'

div3.innerHTML+=div3.offsetLeft+'<br/>'

var inner2=document.getElementById('inner2');