获取div/span标记的位置

Can someone show me how to get the top & left position of a div or span element when one is not specified?

当没有指定一个div或span元素时，是否有人可以告诉我如何获得该div或span元素的顶部和左侧位置?

ie:

即:

<span id='11a' style='top:55px;' onmouseover="GetPos(this);">stuff</span>
<span id='12a' onmouseover="GetPos(this);">stuff</span>

In the above, if I do:

在上面，如果我这样做:

document.getElementById('11a').style.top

The the value of 55px is returned. However, if I try that for span '12a', then nothing gets returned.

返回55px的值。但是，如果我对span“12a”进行尝试，则不会返回任何内容。

I have a bunch of div/spans on a page that I cannot specify the top/left properties for, but I need to display a div directly under that element.

我在页面上有一堆div/span，我无法指定顶部/左侧属性，但我需要在该元素下直接显示div。

6 个解决方案

#1

This function will tell you the x,y position of the element relative to the page. Basically you have to loop up through all the element's parents and add their offsets together.

这个函数会告诉你元素相对于页面的x,y位置。基本上，您必须对所有元素的父元素进行循环，并将它们的偏移量相加。

function getPos(el) {
    // yay readability
    for (var lx=0, ly=0;
         el != null;
         lx += el.offsetLeft, ly += el.offsetTop, el = el.offsetParent);
    return {x: lx,y: ly};
}

However, if you just wanted the x,y position of the element relative to its container, then all you need is:

但是，如果你只想要元素相对于容器的x,y位置，那么你所需要的就是:

var x = el.offsetLeft, y = el.offsetTop;

To put an element directly below this one, you'll also need to know its height. This is stored in the offsetHeight/offsetWidth property.

要将一个元素直接放在这个元素下面，您还需要知道它的高度。它存储在offtheight /offsetWidth属性中。

var yPositionOfNewElement = el.offsetTop + el.offsetHeight + someMargin;

#2

159

You can call the method getBoundingClientRect() on a reference to the element. Then you can examine the top, left, right and/or bottom properties...

您可以在元素的引用上调用getBoundingClientRect()方法。然后你可以检查顶部、左边、右边和/或底部的属性……

var offsets = document.getElementById('11a').getBoundingClientRect();
var top = offsets.top;
var left = offsets.left;

If using jQuery, you can use the more succinct code...

如果使用jQuery，可以使用更简洁的代码……

var offsets = $('#11a').offset();
var top = offsets.top;
var left = offsets.left;

#3

As Alex noted you can use jQuery offset() to get the position relative to the document flow. Use position() for its x,y coordinates relative to the parent.

正如Alex指出的，您可以使用jQuery offset()获取相对于文档流的位置。使用position()为它的x,y坐标相对于父。

EDIT: Switched document.ready for window.load because load waits for all of the elements so you get their size instead of simply preparing the DOM. In my experience, load results in fewer incorrectly Javascript positioned elements.

编辑:交换文档。准备好窗口。load是因为load等待所有元素，所以您可以得到它们的大小，而不是简单地准备DOM。根据我的经验，加载会减少不正确的Javascript定位元素。

$(window).load(function(){ 
  // Log the position with jQuery
  var position = $('#myDivInQuestion').position();
  console.log('X: ' + position.left + ", Y: " + position.top );
});

#4

While @nickf's answer works. If you don't care for older browsers, you can use this pure Javascript version. Works in IE9+, and others

虽然@nickf的回答。如果不喜欢旧浏览器，可以使用这个纯Javascript版本。适用于IE9+等

var rect = el.getBoundingClientRect();

var position = {
  top: rect.top + window.pageYOffset,
  left: rect.left + window.pageXOffset
};

#5

For anyone needing just top or left position, slight modifications to @Nickf's readable code does the trick.

对于任何需要上或左位置的人，只需对@Nickf的可读代码稍加修改即可。

function getTopPos(el) {
    for (var topPos = 0;
        el != null;
        topPos += el.offsetTop, el = el.offsetParent);
    return topPos;
}

and

和

function getLeftPos(el) {
    for (var leftPos = 0;
        el != null;
        leftPos += el.offsetLeft, el = el.offsetParent);
    return leftPos;
}

#6

I realize this is an old thread, but @alex 's answer needs to be marked as the correct answer

我知道这是一条古老的线索，但是@alex的答案需要标记为正确答案

element.getBoundingClientRect() is an exact match to jQuery's $(element).offset()

getboundingclientrect()与jQuery的$(元素).offset()完全匹配。

And it's compatible with IE4+ ... https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect

它与IE4+兼容……https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect

#1