jak uzyskać właściwe przesunięcie elementu? - jQuery

86

To jest prawdopodobnie bardzo proste pytanie, ale jak mam się zabrać do uzyskania właściwego przesunięcia elementu w jQuery?

Mogę zrobić:

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

i to jest ważne.

Ale wydaje się, że:

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

jest niezdefiniowana.

Jak więc można to osiągnąć w jQuery?

Dzięki!!

jquery offset Alex
źródło

Odpowiedzi:

161

Alex, Gary:

Zgodnie z prośbą, oto mój komentarz opublikowany jako odpowiedź:

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

Dzięki, że dałeś mi znać.

W pseudokodzie, który można wyrazić jako:

Prawe przesunięcie to:

Szerokość okna MINUS
( przesunięcie w lewo elementu PLUS szerokość zewnętrzna elementu )

Brendon Crawford
źródło
nie działa to z transformacjami CSS, transformacja wpłynie na przesunięcie, ale zewnętrzna szerokość (i szerokość) nie.
Jonathan.
2
To jest odsunięcie od prawej strony okna. Aby zobaczyć przesunięcie z lewej strony okna, zobacz odpowiedź cdZ .
Codebling
skrajną prawą krawędź elementu można znaleźć bardziej „natywnie” $whatever[0].getBoundingClientRect().right. jest to odniesione do lewej krawędzi okna.
pstanton
Dzięki, Brendon. Pomocna odpowiedź.
29 
var $whatever        = $('#whatever');
var ending_right     = ($(window).width() - ($whatever.offset().left + $whatever.outerWidth()));

Odniesienie: .outerWidth ()

jAndy
źródło
1
Myślę, że muszę je dodać, a następnie odjąć 1. jeśli szerokość wynosi 2, to po lewej stronie jest 10, a po prawej nie 12, ale 11.
nonopolarity
31
To jest nieprawidłowa odpowiedź. W CSS „lewo” oznacza „przesunięcie skrajnego lewego punktu elementu od lewej strony okna / elementu nadrzędnego”, a „prawy” oznacza „przesunięcie najbardziej wysuniętego na prawo punktu elementu od prawej strony okna / elementu nadrzędnego ”. Tak więc prawidłowa odpowiedź brzmiałaby:var rt = ($(window).width() - ($whatever.offset().left + $whatever.outerWidth()));
Brendon Crawford,
5
@BrendonCrawford Powinieneś przenieść ten komentarz do odpowiedzi.
Gary
3
Uwaga dla każdego, kto przychodzi - powyższa odpowiedź została zredagowana, aby poprawnie odzwierciedlić komentarz Brendona.
Chris Marasti-Georg
16

Może źle rozumiem twoje pytanie, ale przesunięcie ma dać ci dwie zmienne: poziomą i pionową. To określa położenie elementu. Więc to, czego szukasz, to:

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

i 

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

Jeśli chcesz wiedzieć, gdzie znajduje się właściwa granica Twojego elementu, użyj:

$("#whatever").offset().left + $("#whatever").outerWidth()
Greg
źródło
9

To tylko dodatek do tego, co powiedział Greg:

$ ("# cokolwiek"). offset (). left + $ ("# cokolwiek"). externalWidth ()

Ten kod otrzyma właściwą pozycję względem lewej strony. Jeśli intencją było uzyskanie pozycji po prawej stronie względem prawej (jak przy użyciu rightwłaściwości CSS ), konieczne jest dodanie do kodu w następujący sposób:

$ ("# parent_container"). innerWidth () - ($ ("# cokolwiek"). offset (). left + $ ("# cokolwiek"). externalWidth ())

Ten kod jest przydatny w animacjach, w których musisz ustawić prawą stronę jako stałą kotwicę, gdy nie możesz początkowo ustawić rightwłaściwości w CSS.

cdZ
źródło
6

W rzeczywistości działają one tylko wtedy, gdy okno nie jest w ogóle przewijane z lewej górnej pozycji.
Musisz odjąć wartości przewijania okna, aby uzyskać przesunięcie przydatne do zmiany pozycji elementów, aby pozostały na stronie:

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
źródło
5

Istnieje natywny interfejs API DOM, który zapewnia to po wyjęciu z pudełka - getBoundingClientRect:

document.querySelector("#whatever").getBoundingClientRect().right
Barney
źródło
2
Ale getBoundingClientRect zwraca wartość względną w stosunku do rzutni, a nie względem dokumentu, co zapewnia offset ().
Sai Dubbaka,
4

Brendon Crawford udzielił tutaj najlepszej odpowiedzi (w komentarzu), więc przeniosę ją do odpowiedzi, dopóki nie (i może trochę rozszerzę).

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

offset.right = $(window).width() - (offset.left + $('#whatever').outerWidth(true));
offset.bottom = $(window).height() - (offset.top + $('#whatever').outerHeight(true));
Gary
źródło
2

Zdobycie punktu zakotwiczenia div/table (left) = $("#whatever").offset().left;- ok!

Aby uzyskać punkt zakotwiczenia div/table (right), możesz użyć poniższego kodu.

 $("#whatever").width();
hyp3r byt3
źródło