如何获得元素的正确偏移？ - jQuery

Question

这可能是一个非常简单的问题,但我如何在jQuery中获得元素的正确偏移？

我可以:

$("#whatever").offset().left;

它是有效的.

但似乎:

$("#whatever").offset().right 

未定义.

那么如何在jQuery中实现这一目标呢？

谢谢!!

Answer 1

亚历克斯,加里:

根据要求,这是我的评论张贴作为答案:

var rt = ($(window).width() - ($whatever.offset().left + $whatever.outerWidth()));

谢谢你让我知道.

在伪代码中,可以表示为:

正确的抵消是:

窗口的宽度为 MINUS
(元素的左侧偏移加上元素的外部宽度)

Answer 2

var $whatever        = $('#whatever');
var ending_right     = ($(window).width() - ($whatever.offset().left + $whatever.outerWidth()));

参考:.outerWidth()

Answer 3

也许我误解了你的问题,但偏移应该给你两个变量:水平和垂直.这定义了元素的位置.所以你要找的是:

$("#whatever").offset().left

和

$("#whatever").offset().top

如果您需要知道元素的右边界在哪里,那么您应该使用:

$("#whatever").offset().left + $("#whatever").outerWidth()

Answer 4

只是格雷格所说的一个补充:

$("#whatever").offset().left + $("#whatever").outerWidth()

此代码将相对于左侧获得正确的位置.如果打算获得相对于右侧的右侧位置(就像使用CSS right属性时那样),则需要添加代码,如下所示:

$("#parent_container").innerWidth() - ($("#whatever").offset().left + $("#whatever").outerWidth())

此代码在动画中很有用,当您无法right在CSS中初始设置属性时,必须将右侧设置为固定锚点.

Answer 5

布伦登·克劳福德 (Brendon Crawford) 在这里给出了最好的答案（在评论中），所以我会将其移至答案，直到他这样做为止（并且可能会稍微扩展一下）。

var offset = $('#whatever').offset();

offset.right = $(window).width() - (offset.left + $('#whatever').outerWidth(true));
offset.bottom = $(window).height() - (offset.top + $('#whatever').outerHeight(true));

Answer 6

实际上，只有在完全不从左上角滚动窗口时，这些功能才起作用。
您必须减去窗口滚动值才能获得一个偏移量，该偏移量对于重新定位元素非常有用，因此它们可以留在页面上：

var offset = $('#whatever').offset();

offset.right = ($(window).width() + $(window).scrollLeft()) - (offset.left + $('#whatever').outerWidth(true));
offset.bottom = ($(window).height() + $(window).scrollTop()) - (offset.top + $('#whatever').outerHeight(true));

Answer 7

有一个本机的DOM API可以实现这一点— getBoundingClientRect：

document.querySelector("#whatever").getBoundingClientRect().right