bagaimana cara mendapatkan offset yang tepat dari suatu elemen?

88

Ini mungkin pertanyaan yang sangat sederhana, tetapi bagaimana cara saya mendapatkan offset yang tepat dari elemen di jQuery?

Dapat saya lakukan:

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

dan itu valid.

Tetapi tampaknya:

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

tidak ditentukan.

Jadi bagaimana cara melakukannya di jQuery?

Terima kasih!!

jquery offset

— Alex
sumber

163

Alex, Gary:

Seperti yang diminta, inilah komentar saya yang diposting sebagai jawaban:

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

Terima kasih telah memberi tahu saya.

Dalam kode pseudo yang dapat diekspresikan sebagai:

Offset yang tepat adalah:

Lebar jendela MINUS
( Offset kiri elemen PLUS lebar luar elemen )

— Brendon Crawford
sumber

ini tidak berfungsi dengan transformasi CSS, offset akan terpengaruh oleh transformasi tetapi outerWidth (dan lebar) tidak akan terpengaruh.

— Jonathan.

2

Ini adalah offset dari sisi kanan jendela. Untuk offset dari sisi kiri jendela, lihat jawaban cdZ .

— Codebling

tepi paling kanan dari sebuah elemen dapat ditemukan dengan lebih "native" $whatever[0].getBoundingClientRect().right. ini relatif terhadap tepi kiri jendela.

— pstanton

Terima kasih brendon. Jawaban yang berguna.

29

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

Referensi: .outerWidth ()

— jAndy
sumber

1

saya pikir perlu menambahkannya lalu minus 1. jika lebarnya 2, maka kiri di 10, dan kanan bukan di 12 tapi 11.

— nonopolaritas

31

Ini jawaban yang salah. Dalam CSS, "left" menyiratkan "offset titik paling kiri elemen dari kiri jendela / induk", dan "right" menyiratkan "offset titik paling kanan elemen dari kanan jendela / induk ". Jadi, jawaban yang benar adalah:var rt = ($(window).width() - ($whatever.offset().left + $whatever.outerWidth()));

— Brendon Crawford

5

@BrendonCrawford Anda harus memindahkan komentar itu ke sebuah jawaban.

— Gary

3

Catatan untuk siapa pun yang datang - jawaban di atas telah diedit untuk mencerminkan dengan benar komentar yang dibuat oleh Brendon.

— Chris Marasti-Georg

16

Mungkin saya salah memahami pertanyaan Anda, tetapi offset seharusnya memberi Anda dua variabel: horizontal dan vertikal. Ini menentukan posisi elemen. Jadi yang Anda cari adalah:

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

dan

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

Jika Anda perlu mengetahui di mana batas kanan elemen Anda, maka Anda harus menggunakan:

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

— Greg
sumber

9

Hanya tambahan dari apa yang dikatakan Greg:

$ ("# terserah"). offset (). kiri + $ ("# terserah"). outerWidth ()

Kode ini akan mendapatkan posisi kanan relatif terhadap sisi kiri. Jika tujuannya adalah untuk mendapatkan posisi sisi kanan relatif ke kanan (seperti saat menggunakan rightproperti CSS ) maka penambahan kode diperlukan sebagai berikut:

$ ("# parent_container"). innerWidth () - ($ ("# apapun"). offset (). left + $ ("# anything"). outerWidth ())

Kode ini berguna dalam animasi di mana Anda harus mengatur sisi kanan sebagai jangkar tetap ketika Anda tidak dapat mengatur rightproperti di CSS pada awalnya .

— cdZ
sumber

6

Sebenarnya ini hanya berfungsi ketika jendela tidak digulir sama sekali dari posisi kiri atas.
Anda harus mengurangi nilai window scroll untuk mendapatkan offset yang berguna untuk memposisikan ulang elemen sehingga tetap berada di halaman:

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

— jrosen
sumber

5

Brendon Crawford memiliki jawaban terbaik di sini (dalam komentar), jadi saya akan memindahkannya ke jawaban sampai dia melakukannya (dan mungkin memperluas sedikit).

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

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

— Gary
sumber

5

Ada API DOM asli yang melakukannya di luar kotak - getBoundingClientRect:

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

— Barney
sumber

2

Tapi getBoundingClientRect mengembalikan secara relatif ke viewport tidak relatif terhadap dokumen, yang disediakan offset ().

— Sai Dubbaka

2

Mendapatkan titik jangkar dari a div/table (left) = $("#whatever").offset().left;- ok!

Mendapatkan titik jangkar div/table (right)Anda dapat menggunakan kode di bawah ini.

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

— hyp3r byt3
sumber

bagaimana cara mendapatkan offset yang tepat dari suatu elemen? - jQuery