对于浮动的物件(通常是 div),我们通常可以利用 style.top 获取其离网页最上端(不是窗口最上端)的位置,但对于静态的的物件,比如网页上任一按钮,要获得其距离页面最上端和最左端的位置就不那么容易了。
利用 offsetTop、offsetLeft、offsetParent(为了兼容,不能使用 parentElement)。
下面的程序中,将返回的值封闭成了类 CPos,此类只有两个成员变量:x-表示距页面最左端的距离,y-表示距页面最上端的距离。
此程序在 IE、Netscape、Opera、FireFox 中均有效。
如下:
function showAuditSubmit(objbtn,objdiv){
objdiv.style.visibility="visible";
objdiv.style.display="block";
var posx=0,posy=objbtn.offsetHeight;
var tar=objbtn;
while(tar){
posx+=tar.offsetLeft;
posy+=tar.offsetTop;
tar=tar.offsetParent;
}
objdiv.style.left=posx+"px";
objdiv.style.top=posy+"px";
}
完整代码。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>获取控件在网页中的绝对位置</title>
</head>
<body>
<div>如果您没有看到按钮,请往下拉到滚动条。</div>
<div style="height:1000px;border:1px solid #6666CC;"> </div>
<input type="button" value="点我获取我的座标" onclick="javascript:var pos = GetObjPos(this);alert('此按钮距页面左端 '+pos.x+' 像素,上端 '+pos.y+' 像素');" />
<script type="text/javascript" language="javascript">
function CPos(x, y)
{
this.x = x;
this.y = y;
}
function GetObjPos(ATarget)
{
var target = ATarget;
var pos = new CPos(target.offsetLeft, target.offsetTop);
var target = target.offsetParent;
while (target)
{
pos.x += target.offsetLeft;
pos.y += target.offsetTop;
target = target.offsetParent
}
return pos;
}
</script>
</body>
</html>