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

Question

我有一个div设置为css类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];
}

Answer 2

user1988451答案的变体,我已经跨浏览器测试过了.我发现他们的答案没有解决滚动宽度(所以我添加了对obj.scrollLeft的检查),并且在FF和Chrome中表现不同,直到我添加了对窗口.scrollY和窗口.scrollX的检查.在Chrome,IE,Safari,Opera,FF,IE 9-10和IE9中测试了8和7模式.请注意,我没有使用iframe测试其行为:

function findPos(obj, foundScrollLeft, foundScrollTop) {
    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);
        foundScrollTop = true;
    }
    if(obj.scrollLeft && obj.scrollLeft > 0) {
        curleft -= parseInt(obj.scrollLeft);
        foundScrollLeft = true;
    }
    if(obj.offsetParent) {
        var pos = findPos(obj.offsetParent, foundScrollLeft, foundScrollTop);
        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 (!foundScrollTop && thewindow.scrollY && thewindow.scrollY > 0) curtop -= parseInt(thewindow.scrollY);
            if (!foundScrollLeft && thewindow.scrollX && thewindow.scrollX > 0) curleft -= parseInt(thewindow.scrollX);
            if(thewindow.frameElement) {
                var pos = findPos(thewindow.frameElement);
                curleft += pos[0];
                curtop += pos[1];
            }
        }
    }

    return [curleft,curtop];
}

Answer 3

如果可以使用items样式元素；

<div id="container" style="top: 20px;left: 0px;z-index: 1999999999;">

您可以通过元素样式属性获取它；

var top = parseInt(document.getElementById('container').style.top.split('px')[0], 10); // This row returns 20

您可以使用顶部、左侧、宽度、高度等...