§ ITPOW >> 文档 >> JavaScript >> DOM & DHTML

获取控件在网页中的绝对位置

作者：chilleen 来源：ITPOW（原创）日期：2006-12-29

对于浮动的物件（通常是 div），我们通常可以利用 style.top 获取其离网页最上端（不是窗口最上端）的位置，但对于静态的的物件，比如网页上任一按钮，要获得其距离页面最上端和最左端的位置就不那么容易了。

利用 offsetTop、offsetLeft、offsetParent（为了兼容，不能使用 parentElement）。

下面的程序中，将返回的值封闭成了类 CPos，此类只有两个成员变量：x－表示距页面最左端的距离，y－表示距页面最上端的距离。

此程序在 IE、Netscape、Opera、FireFox 中均有效。

<!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>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

电邮：cftea@126.com