web-dev-qa-db-ja.com

要素の正しいオフセットを取得する方法は？ -jQuery

これはおそらく非常に単純な質問ですが、jQueryの要素のrightオフセットを取得するにはどうすればよいですか？

できます：

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

そしてそれは有効です。

しかし、それはそうです：

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

未定義です。

それでは、jQueryでこれをどのように実現しますか？

ありがとう!!

jqueryoffset
77
Alex

アレックス、ゲイリー：

要求どおり、回答として投稿された私のコメントは次のとおりです。

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

知らせてくれてありがとうございます。

次のように表現できる擬似コード：

正しいオフセットは次のとおりです。

ウィンドウの 幅 MINUS
（要素の 左オフセット プラス要素の 外幅 ）

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

参照： 。outerWidth（）

28
jAndy

たぶん私はあなたの質問を誤解しているかもしれませんが、オフセットはあなたに2つの変数を与えることになっています：水平と垂直。これにより、要素の位置が定義されます。だからあなたが探しているのは：

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

そして

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

要素の正しい境界がどこにあるかを知る必要がある場合は、次を使用する必要があります。

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

グレッグが言ったことに加えて：

$（ "＃whatever"）。offset（）。left + $（ "＃whatever"）。outerWidth（）

このコードは、左側に対して正しい位置を取得します。 （CSS rightプロパティを使用する場合のように）右側に相対的な右側の位置を取得することを目的とした場合は、次のようにコードに追加する必要があります。

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

このコードは、CSSでrightプロパティを最初に設定できないときに、右側を固定アンカーとして設定する必要があるアニメーションで役立ちます。

8
cdZ

これをすぐに実現するネイティブDOM APIがあります— getBoundingClientRect ：

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

Brendon Crawfordがここで（コメントで）最良の回答をしたので、彼が回答するまで（そして少し拡張するまで）答えに移動します。

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

offset.right = $(window).width() - (offset.left + $('#whatever').outerWidth(true));
offset.bottom = $(window).height() - (offset.top + $('#whatever').outerHeight(true));
4
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));
4
jrosen

div/table (left) = $("#whatever").offset().left;のアンカーポイントを取得する-OK！

div/table (right)のアンカーポイントを取得するには、以下のコードを使用できます。

 $("#whatever").width();
2
hyp3r byt3