Dapatkan dan atur posisi dengan jQuery .offset ()

106

Bagaimana cara mendapatkan dan mengatur posisi elemen dengan .offsetmetode jQuery ?

Katakanlah saya memiliki div layer1dan lainnya layer2. Bagaimana saya bisa mendapatkan posisi layer1dan mengatur posisi yang sama layer2?

jquery Denise
sumber
6
Denise, apakah Anda bahkan memeriksa metode .offset () di situs jQuery? Juga, mengapa Anda tidak menerima jawaban Steve di bawah ini ?!
Rafid
1
@Rafid dia pada dasarnya tidak pernah kembali
jcollum
6
Bisakah saya mendapatkan poinnya?
ganders

Jawaban:

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

//set
$("#secondElementId").offset({ top: offset.top, left: offset.left});
Steve
sumber
7
Anda bisa melewati seluruh offsetobjek, jadi //setakan menjadi: $("#secondElementId").offset(offset)
mecampbellsoup
Hei! bagaimana saya bisa mengatur ke bawah dan kanan div? tidak ada bagian bawah, hak properti di offset
JerryGoyal
34

Saya merekomendasikan opsi lain. jQuery UI memiliki fitur posisi baru yang memungkinkan Anda untuk memposisikan elemen relatif satu sama lain. Untuk dokumentasi dan demo lengkap, lihat: http://jqueryui.com/demos/position/#option-offset .

Berikut salah satu cara untuk memposisikan elemen Anda menggunakan fitur posisi:

var options = {
    "my": "top left",
    "at": "top left",
    "of": ".layer1"
};
$(".layer2").position(options);
KSev
sumber
13
Jawaban ini ditolak dua kali, tanpa penjelasan. Tolong beritahu mengapa, jika Anda tidak memilih jawaban saya. Terima kasih!
KSev
2
Mungkin itu karena Anda menggunakan jQuery UI sedangkan OP hanya meminta jQuery.
kereta dorong bayi
7
sering kali orang bertindak terlalu jauh dengan suara rendah. Jangan berasumsi bahwa jawaban yang lebih luas tidak berguna bagi orang lain bahkan jika itu mungkin merupakan perluasan dari OP. Jangan biarkan saya memulai dengan 'ditutup karena ini bukan pertanyaan yang tepat';)
mendarat
@KSev - Saya dari masa depan. jQuery masih belum memiliki setter di .position... Lihat: api.jquery.com/position
Koshinae
@Kinae Ini bagian dari jQuery "UI". Lihat tautan di atas atau coba jqueryui.com/position . Selain itu, jika Anda menggunakan jQuery, Anda mungkin ingin mempertimbangkan untuk menggunakan angularJS 2.0. Namun, saya harap Anda mempertahankan kode lama.
KSev
16

Ini bisa dilakukan tetapi Anda harus tahu bahwa menggunakan offset()set posisi elemen relatif terhadap dokumen:

$('.layer1').offset( $('.layer2').offset() );
Amjad Masad
sumber
0

Ini adalah opsi. Ini hanya untuk koordinat x.

var div1Pos = $("#div1").offset();
var div1X = div1Pos.left;
$('#div2').css({left: div1X});
hillspro
sumber
offset (). left dan css.left bukanlah hal yang sama, keduanya mungkin memiliki nilai yang sama tergantung pada struktur halaman.
Kalle
Saya memberi +1. Tampaknya berfungsi dengan baik untuk saya dan pada dasarnya sama dengan jawaban yang tidak dipilih di bawah ini yang memiliki 85+ suara.
Paul Nelson Baker
Bekerja untuk saya. Terima kasih atas kontribusinya!
Erlend KH
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/

Chirag Suthar
sumber