Question

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

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）中给出错误的答案，因为它们会将答案四舍五入为整数个像素。取决于你正在做什么，可能会或可能不会。

Answer 2

使用jQuery：

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

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

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

获取没有库的计算CSS position值是another can of worms。归结为：

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')));

我希望对你有所帮助

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

3 个答案: