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


86

这可能是一个非常简单的问题,但是如何在jQuery中获取元素的正确偏移量呢?

我可以:

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

这是有效的。

但似乎:

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

未定义。

那么如何在jQuery中做到这一点呢?

谢谢!!

Answers:


161

亚历克斯,加里:

根据要求,以下是我的评论作为答案:

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

谢谢你让我知道。

用伪代码可以表示为:

正确的偏移量是:

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


这不适用于CSS转换,偏移将受转换影响,而externalWidth(和width)则不受此影响。
乔纳森。

2
这是从窗口右侧的偏移量。有关窗口左侧的偏移量,请参见cdZ的答案
编码

元素的最右边缘可以更“本地地”找到$whatever[0].getBoundingClientRect().right。这是相对于窗口的左边缘。
pstanton '17

谢谢布伦登。有用的答案。

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

参考:.outerWidth()


1
我认为需要添加它们,然后减去1。如果宽度为2,则左侧为10,右侧不是12,而是
11。– nonopolarity

31
这是不正确的答案。在CSS中,“左”表示“元素的最左点相对于窗口/父级左侧的偏移量”,而“右”表示“元素的最右点与窗口/父级右侧的偏移量” ”。因此,正确的答案将是:var rt = ($(window).width() - ($whatever.offset().left + $whatever.outerWidth()));
布伦登·克劳福德

5
@BrendonCrawford您应该将该评论移至答案。
加里2012年

3
给通过的任何人的注释-上面的答案已被编辑以正确反映Brendon的评论。
克里斯·马拉斯蒂·乔治

16

也许我误解了您的问题,但是偏移量应该给您两个变量:水平和垂直。这定义了元素的位置。因此,您正在寻找的是:

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

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

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

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

9

只是格雷格所说的:

$(“#whatever”)。offset()。left + $(“#whatever”)。outerWidth()

此代码将获得相对于左侧的正确位置。如果要获得相对于右侧的右侧位置(例如使用CSSright属性时),则必须对代码进行如下补充:

$(“#parent_container”)。innerWidth()-($(“#whatever”)。offset()。left + $(“#whatever”)。outerWidth())

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


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

5

有一个本机DOM API可以实现此目标— getBoundingClientRect

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

2
但是getBoundingClientRect相对于视口而不是相对于文档返回,这是offset()提供的。
西迪巴巴卡'17

4

布伦登·克劳福德(Brendon Crawford)在这里得到了最好的答案(在评论中),因此我将其移至答案,直到他回答为止(也许会扩大一点)。

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

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

2

得到一个锚点div/table (left) = $("#whatever").offset().left;-好吧!

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

 $("#whatever").width();
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.