jQuery .offset（）で位置を取得および設定する

106

jQuery .offsetメソッドで要素の位置を取得および設定する方法は？

私がdiv layer1と別のを持っているとしましょうlayer2。の位置を取得しlayer1て同じ位置に設定するにはどうすればよいlayer2ですか？

jquery

— デニス
ソース

6

デニス、jQueryのWebサイトで.offset（）メソッドをチェックしましたか？また、下のスティーブの答えを受け入れてみませんか？！

— Rafid

1

@Rafid彼女は基本的に二度と戻ってきませんでした

— jcollum 2013年

6

彼女のポイントをもらえますか？

— 2014

191

//Get
var p = $("#elementId");
var offset = p.offset();

//set
$("#secondElementId").offset({ top: offset.top, left: offset.left});

— スティーブ
ソース

7

あなただけの全体渡すことができますoffsetオブジェクトを、そう//setなる： $("#secondElementId").offset(offset)

— mecampbellsoup

おい！divの右下に設定するにはどうすればよいですか？下に右のプロパティはありません

— JerryGoyal

34

別のオプションをお勧めします。jQuery UIには、要素を相互に相対的に配置できる新しい配置機能があります。完全なドキュメントとデモについては、http : //jqueryui.com/demos/position/#option-offsetを参照してください。

配置機能を使用して要素を配置する1つの方法を次に示します。

var options = {
    "my": "top left",
    "at": "top left",
    "of": ".layer1"
};
$(".layer2").position(options);

— KSev
ソース

13

この回答は、説明なしで2回投票されました。私の回答に反対票を投じる場合は、その理由を教えてください。ありがとう！

— KSev 2013

2

多分それは、OPがjQueryのみを要求するときにjQuery UIを使用するためです。

— 乳母車2014年

7

多くの場合、人々は反対票を投じて遠すぎます。それがOPの拡張であるとしても、より広い答えが他の人にとって役に立たないと仮定しないでください。「これは適切な質問ではないので、クローズド」から始めないでください;）

— 着陸

@KSev-私は未来から来ました。jQueryにはまだセッターがありません.position...参照：api.jquery.com/position

— Koshinae

@Koshinae jQuery「UI」の一部です。上記のリンクを参照するか、jqueryui.com/positionを試してください。また、jQueryを使用している場合は、angularJS 2.0の使用を検討してください。ただし、レガシーコードを維持していると思います。

— KSev 2016年

16

実行可能ですが、を使用offset()すると、ドキュメントに対する要素の位置が設定されることを知っておく必要があります。

$('.layer1').offset( $('.layer2').offset() );

— アムジャドマサド
ソース

0

ここにオプションがあります。これは単にx座標用です。

var div1Pos = $("#div1").offset();
var div1X = div1Pos.left;
$('#div2').css({left: div1X});

— Hillspro
ソース

offset（）。leftとcss.leftは同じものではありません。ページ構造に応じて、同じ値になる場合と異なる場合があります。

— Kalle

+1しました。それは私にとってはうまくいくようです、そしてそれは85票以上の以下の選ばれていない答えと本質的に同じです。

— ポールネルソンベイカー

私のために働いた。貢献してくれてありがとう！

— Erlend KH 2015

0

var redBox = $(".post");

var greenBox = $(".post1");

var offset = redBox.offset();

$(".post1").css({'left': +offset.left});
$(".post1").html("Left :" +offset.left);

http://jsfiddle.net/va836/159/

— チラグ・サタール
ソース