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!!

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 )


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


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

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.


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

5

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

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

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

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();
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.