javascript - 获取元素相对于浏览器的绝对位置

Question

我将一个 div 设置为 css 类 float，其中 float 为:

.float {
display:block; 
position:fixed; 
top: 20px;
left: 0px;
z-index: 1999999999;
}
* html .float {position:absolute;}

这个类使元素停留在页面的固定位置(*html 部分是为了让它在 IE 中工作)。我正在使用 javascript 水平和垂直移动元素的位置。

我需要在 javascript 中获取 div 相对于浏览器窗口的绝对位置(div 距离浏览器窗口的顶部和左侧有多少像素)。现在，我正在使用以下内容:

pos_left = document.getElementById('container').offsetLeft;
pos_top = document.getElementById('container').offsetTop;

上面的代码适用于 IE、Chrome 和 FF，但在 Opera 中它对两者都返回 0。我需要一个适用于所有这些浏览器的解决方案。有什么想法吗？

顺便说一句:跟踪 javascript 所做的更改是可能的，但由于性能原因，这不是我正在寻找的解决方案。另外，我不使用 jquery。

Answer 1

我以前也有过类似的问题，通过查看博客、网站和来自 stackoverflow 的这个解决方案，我意识到无法找到一个通用的解决方案!因此，事不宜迟，这就是我放在一起的内容，它通过任何父节点获取任何元素的 x、y，包括 iframe、滚动 div 等等!给你:

function findPos(obj) {
    var curleft = 0;
    var curtop = 0;
    if(obj.offsetLeft) curleft += parseInt(obj.offsetLeft);
    if(obj.offsetTop) curtop += parseInt(obj.offsetTop);
    if(obj.scrollTop && obj.scrollTop > 0) curtop -= parseInt(obj.scrollTop);
    if(obj.offsetParent) {
        var pos = findPos(obj.offsetParent);
        curleft += pos[0];
        curtop += pos[1];
    } else if(obj.ownerDocument) {
        var thewindow = obj.ownerDocument.defaultView;
        if(!thewindow && obj.ownerDocument.parentWindow)
            thewindow = obj.ownerDocument.parentWindow;
        if(thewindow) {
            if(thewindow.frameElement) {
                var pos = findPos(thewindow.frameElement);
                curleft += pos[0];
                curtop += pos[1];
            }
        }
    }

    return [curleft,curtop];
}