使用javascript，如何得到一个元素的position

Question

就像标题说的那样，如何获取元素的 x、y 位置相对于它们在 web 页面中的位置以及它们的定位方案，如绝对、相对等。

Answer 1

在现代浏览器中，getBoundingClientRect 和 getClientRects 将为您提供描述元素的 rect 对象。 请参阅https://developer.mozilla.org/en/DOM/element.getBoundingClientRect和https://developer.mozilla.org/en/DOM/element.getClientRects

如果您必须使用 IE8，那么您必须在不同的浏览器中执行不同的操作才能获得正确的答案（例如，对象检测 getBoundingClientRect 并在不存在时使用其他方法）。

jQuery offset()计算和 Quirksmode findPos将在任何进行亚像素定位的浏览器（例如 Firefox 或 IE9）中给出不正确的答案，因为它们会将答案四舍五入为像素数为 Z157DB7DF530023575515ZD366C。 取决于你在做什么，这可能会也可能不会。

Answer 2

使用 jQuery：

var $elt = $('select an element however'),
    cssPosition = $elt.css('position'),
    offset = $elt.offset(),
    top = offset.top,
    left = offset.left;

如果没有 jQuery，请使用Quirksmode 的findPos function ：

var elt = document.getElementBy...,
    pos = findPos(elt),
    top = pos[1],
    left = pos[0];

在没有库的情况下获取计算的 CSS position值是另一种蠕虫。 它归结为：

• element.currentStyle (IE)
• getComputedStyle(element) （真实浏览器）

Answer 3

看看这个

JS：

function findPos(obj) {
    var curleft = curtop = 0;
    if (obj.offsetParent) {
        curleft = obj.offsetLeft
        curtop = obj.offsetTop
        while (obj = obj.offsetParent) {
            curleft += obj.offsetLeft
            curtop += obj.offsetTop
        }
    }
    return [curleft,curtop];
}

HTML：

<div id="ser">&nbsp;TEST</div>

回电：

alert(findPos(document.getElementById('ser')));

我希望它对你有帮助