如何获得绝对定位元素的左侧/右侧/顶部/底部的实际值? [英] How do I get the actual values for left/right/top/bottom of an absolutely positioned element?

问题描述

(这似乎是一个以前曾被问过的简单问题，但是尽管有很多类似的问题都无法回答我想要的东西，但是我找不到它.)

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

In Firefox (24.0), this code gives me what I want - the relevant number of pixels:

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

在Chrome浏览器(34.0.1847.137 m)中，左/顶部仅显示像素，而右/底部返回auto.

In Chrome (34.0.1847.137 m), it only gives pixels for left/top but returns auto for right/bottom.

SO上有各种各样的问题可以解释这是.css的预期行为，但我找不到任何能解释如何获得所需行为的东西-即为我提供所有四个值的计算像素值.

There are various questions on SO explaining that this is the expected behaviour of .css, but I cannot find anything that explains how to get my desired behaviour - i.e. give me calculated pixel values for all four values.

JS或jQuery是否有任何方法可以直接获取这四个值，而这四个值在所有浏览器/场景中均能正常工作? (还是我必须求助于丑陋的手动计算?)

Do JS or jQuery have any way to directly get these four values, that works consistently in all browsers/scenarios? (Or do I have to resort to ugly manual calculations?)

说明:
我需要的值等于Firefox返回的.css('right')值-这是当前元素和父元素的右边缘之间的距离.这与某些函数返回的相对于视口的left + width定义不同.

Clarification:
I need values that are equivalent to the .css('right') values that Firefox returns - which is the distance between the right-edges of the current and parent element. This is not the same as viewport-relative left+width definitions which some functions return.

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

i.e. the logged values here should be numerically the same:

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

除非我误解了其他答案，否则只有

Unless I'm misreading the other answers, only kalley's getRelativeClientRect answer meets this criteria.

推荐答案

您可以使用 getBoundingClientRect .如果您正在使用它们，它将也考虑到任何变换.

you can use getBoundingClientRect. It will take into account any transforms as well, if you are using them.

您需要像jQuery('selector')[0].getBoundingClientRect()这样称呼它.或使用document.querySelector('selector').getBoundingClientRect()之类的普通javascript，它将返回单个元素或document.querySelectorAll('selector')[index].getBoundingClientRect().

You'd need to call it like jQuery('selector')[0].getBoundingClientRect(). Or use vanilla javascript like document.querySelector('selector').getBoundingClientRect(), which will return a single element or document.querySelectorAll('selector')[index].getBoundingClientRect().

总而言之，以一种更具可读性的格式:

To summarize, in a slightly more readable format:

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

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

或将QS呼叫替换为较早的呼叫，例如getElementById等.

or replace the QS calls with older ones like getElementById, etc.

如果要相对于其父项获取它，可以使用以下函数:

Here's a function you could use if you wanted to get it relative to it's parent:

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
  };
}

这篇关于如何获得绝对定位元素的左侧/右侧/顶部/底部的实际值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！