如何獲得一個元素的正確偏移量？ - jQuery

這可能是一個非常簡單的問題，但我該如何獲得jQuery中元素的正確偏移？如何獲得一個元素的正確偏移量？ - jQuery

我可以這樣做：

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

，它是有效的。

但似乎：

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

是不確定的。

那麼，如何在jQuery中完成這項工作呢？

謝謝！

來源

2010-06-15 Alex

127

亞歷克斯，加里：

按照要求，這裏是我的評論張貼作爲一個答案：

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

謝謝你讓我知道。

來源

2012-06-21 22:47:08

這不適用於CSS轉換，偏移將受轉換影響，但outerWidth（和width）不會。 – 2014-12-29 16:37:05

這是從窗口右側的偏移量。對於窗口左側的偏移量，請參閱cdZ的[答案]（http://stackoverflow.com/a/5643921/675721）。 – 2015-10-08 21:13:01

元素的最右邊可以被更多地「本地」找到$ whatever [0] .getBoundingClientRect（）。right'。這是相對於窗口的左邊緣。 – pstanton 2017-10-03 05:45:48

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

參考：.outerWidth()

來源

2010-06-15 06:58:57 jAndy

我認爲需要添加它們，然後減去1.如果寬度是2，那麼剩下的是在10 ，並且右邊不是12而是11. – 2010-06-15 07:02:26

+30

這是不正確的答案。在CSS中，「left」意味着「窗口/父窗口左側的元素的最左點的偏移量」，「右」意味着「窗口/父窗口右側的元素的最右點的偏移量」。所以，正確的答案是：'var rt =（$（window）.width（） - （$ whatever.offset（）。left + $ whatever.outerWidth（）））;' – 2011-12-14 10:58:24

人們怎麼沒注意到這是不正確的答案：0 – 2011-12-28 22:15:55

也許我誤解你的問題，但偏移應該給你兩個變量：水平和垂直。這定義了元素的位置。所以，你要尋找的是：

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

和

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

如果你需要知道你的元素的右邊界，那麼你應該使用：

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

來源

2010-06-15 06:59:21 Greg

這是一個讓元素正確的技巧。謝謝Greg！ – n2lose 2011-02-24 07:04:43

只是格雷格說的一個補充：

$（「＃whatever」）。offset（）。left + $（「＃」無論「）。outerWidth（）

此代碼將獲得相對於左側的正確位置。如果目的是爲了獲得相對右側位置向右（使用CSS right屬性時等），那麼除了代碼是必要如下：

$（「＃parent_container」）innerWidth（） - （$（「＃whatever」）。offset（）。left + $（「＃whatever」）。outerWidth（））

此代碼在需要將右側設置爲當您最初無法在CSS中設置right屬性時，它是一個固定錨點。

來源

2011-04-13 03:01:51 cdZ

Brendon Crawford在這裏有最好的答案（在評論中），所以我會把它移到一個答案，直到他確實（也許會擴大一點）。

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

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

來源

2012-05-14 02:54:36 Gary

實際上，這些僅在窗口沒有從左上角滾動時才起作用。
你必須減去窗口滾動值獲得的偏移，使他們在網頁上停留的重新定位元素有用：

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

來源

2012-07-18 20:24:10 jrosen

獲得一個div/table (left) = $("#whatever").offset().left;的定位點 - OK！

獲取div/table (right)的定位點，您可以使用下面的代碼。

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

來源

2013-04-18 09:37:54

有一個內在的DOM API，它實現這一開箱 - getBoundingClientRect：

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

來源

2016-04-13 11:52:22 Barney

但getBoundingClientRect返回相對於與文檔無關的視口，這是offset（）提供的內容。 – 2017-04-05 23:40:52

如何獲得一個元素的正確偏移量？ - jQuery

回答

相關問題