JavaScript中获取元素的绝对位置

阅读次数: 4,894

在一些应用中，可能会有需要知道某一个控件在页面中的位置，在网上比较容易找到下面这个解决方法。
在页面中有一个按钮：

<input id="a" type="button" value="click me to get position"
onclick="getPos(this)" />

1 2	<input id="a" type="button" value="click me to get position" onclick="getPos(this)" />

在脚本中响应点击事件的是这个函数：

function getPos(e){
    var t=e.offsetTop;
    var l=e.offsetLeft;
    while(e=e.offsetParent){
        t+=e.offsetTop;
        l+=e.offsetLeft;
    }
    alert("top="+t+"\nleft="+l);
}

function getPos(e){

var t=e.offsetTop;

var l=e.offsetLeft;

while(e=e.offsetParent){

t+=e.offsetTop;

l+=e.offsetLeft;

}

alert("top="+t+"\nleft="+l);

}

这个方法的实现相当精炼，意思就是先取得自己的相对位置，再叠加其最近的相对位置容器（offsetParent，它不一定是其父节点）的相对位置，直至顶层位置容器（一般就是body），从而得出该节点的相对位置。
不过，很快就发现这个函数也许并不够用，因为我在页面里有可能使用了一些CSS来使得本来平铺的画面变成一个滚动区域，例如设置了父节点的height为某个值，并且其overflow设为auto或者scroll。这时，上面的方法因为没有计算其滚动偏移，所以所得的值不一定是元素当前的绝对位置，所以我对上面的方法进行了一些小改动，实际上就是加入了对其滚动偏移量的计算。

function getPosition(sender) {
    var e=sender,E=e;
    var x=e.offsetLeft;
    var y=e.offsetTop;
    while (e=e.offsetParent) {
        var P=e.parentNode;
        while (P!=(E=E.parentNode)) {
            x-=E.scrollLeft;
            y-=E.scrollTop;
        }
        x+=e.offsetLeft;
        y+=e.offsetTop;
        E=e;
    }
    return {"x":x,"y":y};
    //alert("top="+y+"\nleft="+x);
}

function getPosition(sender) {

var e=sender,E=e;

var x=e.offsetLeft;

var y=e.offsetTop;

while (e=e.offsetParent) {

var P=e.parentNode;

while (P!=(E=E.parentNode)) {

x-=E.scrollLeft;

y-=E.scrollTop;

}

x+=e.offsetLeft;

y+=e.offsetTop;

E=e;

}

return {"x":x,"y":y};

//alert("top="+y+"\nleft="+x);

}

稍微测试了一下，基本上在IE和FF中都能正常运转。
在运用方面，由于使用到往上遍历，如果节点树结构过于复杂，而且有不会有滚动出现的话，那么还是用第一个方法就足够了。

Jennal's Blog

Jennal的技术博客

JavaScript中获取元素的绝对位置

3 comments

Leave a Reply Cancel reply