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

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