logo标签列表

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

javascriptcsspositioningoffset
14
我有一个设置了CSS类名为float的div，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。

3
如果不需要使用jQuery，那么不使用它并提及这一点是个好习惯，给你一个赞 :) - Moin Zaman
小心z-indez处的数字；）如果不需要，请不要将其设置得太高。 - Alin Purcaru
使用如此高的z-index会降低性能吗？ - user396404
请查看以下链接： https://dev59.com/lHM_5IYBdhLWcg3wNgKZ#16626843 - dersimn
5个回答
11

我之前有过类似的问题，在浏览博客、网站和stackoverflow上的解决方案后，我意识到并没有通用的解决方案！所以，不再拖延，以下是我整理出来的代码，可以获取包括iframe、滚动div等在内的任何父元素中的任何元素的x、y坐标。请看：

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

这是对用户user1988451回答的一种变化，我已经跨浏览器测试过了。我发现他们的回答没有考虑到滚动宽度（所以我添加了obj.scrollLeft的检查），并且在Firefox和Chrome中的行为不同，直到我添加了对window.scrollY和window.scrollX的检查才得到解决。已在Chrome、IE、Safari、Opera、FF、IE 9-10和IE9下测试过，并且在8和7模式下测试其行为，请注意我尚未测试它与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];
}
1

如果您可以使用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

您可以使用 top、left、width、height 等等...

3
为什么要使用eval？完全不需要。 - Fabien Ménager
还是同样的问题。偏移量显示为0 :/ - user396404
@Fabien 因为 style.top 属性被分割了，它返回字符串。 @user396404 你能在任何网页或这个页面上发布代码吗？ - ismailperim
啊，搞定了。我稍微修改了一下，写了以下函数：function styleval(v) { v = v.split('px'); return v[0]*1;}然后我使用pos_top = styleval(document.getElementById('container').style.top);感谢你的建议 :) - user396404
5
parseInt(document.getElementById('container').style.top) 这句话就能达到效果。 - Fabien Ménager
1
我用这个来进行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
  };
}
1
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接