如何获得元素的正确偏移量?- jQuery
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/3043102/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to get right offset of an element? - jQuery
提问by Alex
This is probably a really simple question, but how do I go about getting the rightoffset of an element in jQuery?
这可能是一个非常简单的问题,但是如何在 jQuery 中获取元素的正确偏移量?
I can do:
我可以:
$("#whatever").offset().left;
and it is valid.
它是有效的。
But it seems that:
但似乎:
$("#whatever").offset().right
is undefined.
未定义。
So how does one accomplish this in jQuery?
那么如何在 jQuery 中实现这一点呢?
Thanks!!
谢谢!!
回答by Brendon Crawford
Alex, Gary:
亚历克斯,加里:
As requested, here is my comment posted as an answer:
根据要求,这是我作为答案发布的评论:
var rt = ($(window).width() - ($whatever.offset().left + $whatever.outerWidth()));
Thanks for letting me know.
谢谢你让我知道。
In pseudo code that can be expressed as:
在伪代码中可以表示为:
The right offset is:
正确的偏移量是:
The window's widthMINUS
( The element's left offsetPLUS the element's outer width)
回答by jAndy
var $whatever = $('#whatever');
var ending_right = ($(window).width() - ($whatever.offset().left + $whatever.outerWidth()));
Reference: .outerWidth()
回答by Greg
Maybe I'm misunderstanding your question, but the offset is supposed to give you two variables: a horizontal and a vertical. This defines the position of the element. So what you're looking for is:
也许我误解了你的问题,但偏移量应该给你两个变量:水平和垂直。这定义了元素的位置。所以你要找的是:
$("#whatever").offset().left
and
和
$("#whatever").offset().top
If you need to know where the right boundary of your element is, then you should use:
如果您需要知道元素的右边界在哪里,那么您应该使用:
$("#whatever").offset().left + $("#whatever").outerWidth()
回答by cdZ
Just an addition to what Greg said:
只是对格雷格所说的补充:
$("#whatever").offset().left + $("#whatever").outerWidth()
$("#whatever").offset().left + $("#whatever").outerWidth()
This code will get the right position relative to the left side. If the intention was to get the right side position relative to the right (like when using the CSS right
property) then an addition to the code is necessary as follows:
此代码将获得相对于左侧的正确位置。如果目的是获得相对于右侧的右侧位置(如使用 CSSright
属性时),则需要添加如下代码:
$("#parent_container").innerWidth() - ($("#whatever").offset().left + $("#whatever").outerWidth())
$("#parent_container").innerWidth() - ($("#whatever").offset().left + $("#whatever").outerWidth())
This code is useful in animations where you have to set the right side as a fixed anchor when you can't initially set the right
property in CSS.
此代码在动画中很有用,当您最初无法right
在 CSS 中设置属性时,您必须将右侧设置为固定锚点。
回答by jrosen
Actually these only work when the window isn't scrolled at all from the top left position.
You have to subtract the window scroll values to get an offset that's useful for repositioning elements so they stay on the page:
实际上,这些仅在窗口根本不从左上角位置滚动时才起作用。
您必须减去窗口滚动值以获得一个对重新定位元素有用的偏移量,以便它们留在页面上:
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));
回答by Barney
There's a native DOM API that achieves this out of the box — getBoundingClientRect
:
有一个原生 DOM API 可以开箱即用地实现这一点—— getBoundingClientRect
:
document.querySelector("#whatever").getBoundingClientRect().right
回答by Gary
Brendon Crawford had the best answer here (in comment), so I'll move it to an answer until he does (and maybe expand a little).
布伦登·克劳福德 (Brendon Crawford) 在这里给出了最好的答案(在评论中),所以我会将其移至答案,直到他这样做为止(并且可能会稍微扩展一下)。
var offset = $('#whatever').offset();
offset.right = $(window).width() - (offset.left + $('#whatever').outerWidth(true));
offset.bottom = $(window).height() - (offset.top + $('#whatever').outerHeight(true));
回答by hyp3r byt3
Getting the anchor point of a div/table (left) = $("#whatever").offset().left;
- ok!
获取 a 的锚点div/table (left) = $("#whatever").offset().left;
- 好的!
Getting the anchor point of a div/table (right)
you can use the code below.
获取 a 的锚点,div/table (right)
您可以使用下面的代码。
$("#whatever").width();