javascript - 如何获取绝对定位元素的左/右/上/下的实际值？

Question

(这似乎是一个以前会被问到的简单问题，但即使有我也找不到它，尽管有很多类似的问题没有回答我想要的。)

在 Firefox (24.0) 中，这段代码给出了我想要的 - 相关的像素数:

jQuery('selector').css('right')

在 Chrome (34.0.1847.137 m) 中，它只为左/上提供像素，但为右/下返回 auto。

关于 SO 有各种问题解释这是 .css 的预期行为，但我找不到任何解释如何获得所需行为的信息 - 即为所有四个值提供计算像素值。

JS 或 jQuery 是否有任何方法可以直接获取这四个值，并且在所有浏览器/场景中都一致？ (还是我必须求助于丑陋的手动计算？)

澄清:
我需要等同于 Firefox 返回的 .css('right') 值的值 - 这是当前元素和父元素的右边缘之间的距离。这与某些函数返回的视口(viewport)相关的左+宽度定义不同。

即此处记录的值在数值上应该相同:

elem = jQuery('selector')
rect = someFunction( elem[0] );
console.log([ elem.css('left') , rect.left ]);
console.log([ elem.css('right') , rect.right ]);
console.log([ elem.css('top') , rect.top ]);
console.log([ elem.css('bottom') , rect.bottom ]);

除非我误读了其他答案，否则只有 kalley's getRelativeClientRect answer符合这个条件。

Answer 1

你可以使用getBoundingClientRect .如果您正在使用它们，它也会考虑任何转换。

您需要像 jQuery('selector')[0].getBoundingClientRect() 那样调用它。或者使用像 document.querySelector('selector').getBoundingClientRect() 这样的原始 javascript，它将返回单个元素或 document.querySelectorAll('selector')[index].getBoundingClientRect() 。

总结一下，以更易读的格式:

• jQuery('selector')[0].getBoundingClientRect()
• document.querySelector('selector').getBoundingClientRect()
• document.querySelectorAll('selector')[index].getBoundingClientRect()

或者将 QS 调用替换为旧的调用，例如 getElementById 等

如果你想得到它相对于它的父级，你可以使用这个函数:

function getRelativeClientRect(el) {
  var rect = el.getBoundingClientRect(),
      parentRect = el.offsetParent.getBoundingClientRect();
  return {
    bottom: parentRect.bottom - rect.bottom,
    height: rect.height,
    left: rect.left - parentRect.left,
    right: parentRect.right - rect.right,
    top: rect.top - parentRect.top,
    width: rect.width
  };
}