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

Question

I have a div set to the css class float with float being:

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

This class causes the element to stay in a fixed position on the page (the *html part is to make it work in IE). I am using javascript to shift the position of the element horizontally and vertically.

I need to get the absolute position of the div relative to the browser window in javascript (how many pixels from the top and left of the browser window the div is). Right now, I am using the following:

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

The code above works for IE, Chrome, and FF, but in Opera it returns 0 for both. I need a solution that works for all of those browsers. Any ideas?

Btw: Keeping tracking of the changes made by javascript is possible, but that is not the solution I am looking for due to performance reasons. Also, I am not using jquery.

Answer 1

I've had a similar question before, and looking through the blogs, the websites and this solution from stackoverflow, I've realized that a one size fits all solution is nowhere to be found! So, without further ado, here is what I've put together that gets the x,y of any element through any parent node, including iframes, scrolling divs and whatever! Here ya go:

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

A variation on user1988451's answer that I have tested cross-browser. I found their answer did not address scroll width (so I added the check for obj.scrollLeft), and behaved differently in FF and Chrome until I added the checks for thewindow.scrollY and thewindow.scrollX. Tested in Chrome, IE, Safari, Opera, FF, IE 9-10, and IE9 with 8 and 7 modes. Please note that I have not tested its behavior with iframes:

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

I use this for PhantomJS rasterization:

function getClipRect(obj) {
  if (typeof obj === 'string')
    obj = document.querySelector(obj);

  var curleft = 0;
  var curtop = 0;

  var findPos = function(obj) {
    curleft += obj.offsetLeft;
    curtop += obj.offsetTop;
    if(obj.offsetParent) {
      findPos(obj.offsetParent);
    }
  }
  findPos(obj);

  return {
    top: curtop,
    left: curleft,
    width: obj.offsetWidth,
    height: obj.offsetHeight
  };
}

Answer 4

If you can use items style element;

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

You can get it with element style attribute;

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

You can use top, left, width, height etc...

Answer 5

您可能会在这里找到线索： http : //code.google.com/p/doctype/wiki/ArticlePageOffset但我认为您需要添加父母的偏移量才能获得正确的值。