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

【问题标题】：Getting absolute position of an element relative to browser获取元素相对于浏览器的绝对位置
【发布时间】：2011-04-25 05:30:02
【问题描述】：

我有一个 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。

【问题讨论】：

+1 如果你不需要的话不要使用 jQuery 并提及它:)
小心z-indez 的那个号码;)。如果你不需要，不要那么高。
使用如此高的 z 索引会降低性能吗？
看这个：stackoverflow.com/questions/1480133/…

标签： javascript css positioning offset

【解决方案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];
}

【讨论】：

【解决方案2】：

我已经测试过跨浏览器的 user1988451 答案的变体。我发现他们的答案没有解决滚动宽度问题（所以我添加了对 obj.scrollLeft 的检查），并且在 FF 和 Chrome 中表现不同，直到我添加了对 thewindow.scrollY 和 thewindow.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];
}

【讨论】：

【解决方案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

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

【讨论】：

你为什么使用 eval ？这根本不需要
还是一样。表示偏移量为 0：/
@Fabien 因为 style.top 属性被拆分并且它的返回字符串。 @user396404 你可以在任何网页或这个页面上发布代码吗？
啊纳米，用这个就可以了。只是稍微修改了一下，做了如下函数：function styleval(v) { v = v.split('px');返回 v[0]*1；然后我使用 pos_top = styleval(document.getElementById('container').style.top);谢谢你的建议:)
parseInt(document.getElementById('container').style.top) 可以解决问题。

【解决方案4】：

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

【讨论】：

【解决方案5】：

我将它用于 PhantomJS 光栅化：

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
  };
}

【讨论】：