使用javascript，如何获取元素的位置

Question

就像标题所说，如何获取元素相对于其在网页中的位置的 x、y 位置以及它们的定位方案（如绝对、相对等）。

Answer 1

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

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

jQuery offset() 计算和 Quirksmode findPos 将在任何进行子像素定位的浏览器（例如 Firefox 或 IE9）中给出错误的答案，因为它们会将答案舍入为整数像素。根据您在做什么，这可能会也可能不会。

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 函数：

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

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

• element.currentStyle< /code>(IE)
• getCompulatedStyle(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"> TEST</div>

回电:

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

我希望它对你有帮助