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

【问题标题】：how to get right offset of an element? - jQuery如何获得元素的正确偏移量？ - jQuery
【发布时间】：2011-03-03 20:30:28
【问题描述】：

这可能是一个非常简单的问题，但是如何在 jQuery 中获取元素的 right 偏移量？

我能做到：

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

它是有效的。

但似乎：

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

未定义。

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

谢谢！！

【问题讨论】：

标签： jquery offset

【解决方案1】：

亚历克斯，加里：

根据要求，这是我作为答案发布的评论：

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

感谢您告诉我。

在伪代码中可以表示为：

正确的偏移量是：

窗口的width MINUS
（元素的left offset 加上元素的outer width）

【讨论】：

这不适用于 CSS 变换，偏移会受变换影响，但 outerWidth（和宽度）不会。
这是窗口右侧的偏移量。有关窗口左侧的偏移量，请参阅 cdZ 的answer。
元素的最右边可以更“原生地”找到$whatever[0].getBoundingClientRect().right。这是相对于窗口的左边缘的。
谢谢布兰登。有用的答案。

【解决方案2】：

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

参考：.outerWidth()

【讨论】：

我认为需要添加它们然后减1。如果宽度是2，那么左边是10，右边不是12而是11。
这是一个错误的答案。在 CSS 中，“left”表示“元素最左边的点与窗口/父级左侧的偏移量”，“right”表示“元素最右边的点与窗口/父级右侧的偏移量” ”。所以，正确的答案是：var rt = ($(window).width() - ($whatever.offset().left + $whatever.outerWidth()));
@BrendonCrawford 您应该将该评论移至答案。
给任何通过的人的说明 - 上面的答案已经过编辑，以正确反映 Brendon 的评论。

【解决方案3】：

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

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

和

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

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

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

【讨论】：

【解决方案4】：

只是对 Greg 所说的话的补充：

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

此代码将获得相对于左侧的正确位置。如果意图是获得相对于右侧的右侧位置（例如使用 CSS right 属性时），则需要在代码中添加如下内容：

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

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

【讨论】：

【解决方案5】：

实际上，这些仅在窗口根本不从左上角滚动时才有效。
您必须减去窗口滚动值以获得对重新定位元素很有用的偏移量，以便它们留在页面上：

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

【讨论】：

【解决方案6】：

Brendon Crawford 在这里给出了最好的答案（在评论中），所以我会把它移到一个答案，直到他这样做（并且可能会扩大一点）。

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

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

【讨论】：

【解决方案7】：

有一个开箱即用的原生 DOM API — getBoundingClientRect：

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

【讨论】：

但是 getBoundingClientRect 返回的是相对于视口而不是相对于文档的，这是 offset() 提供的。

【解决方案8】：

获取div/table (left) = $("#whatever").offset().left; 的锚点 - 好的！

获取div/table (right)的锚点可以使用下面的代码。

 $("#whatever").width();

【讨论】：