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

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的findPos函数:

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

获取position没有库的计算CSS 值是另一种蠕虫.归结为:

• element.currentStyle (IE)
• getComputedStyle(element) (真正的浏览器)