come ottenere il giusto offset di un elemento?

88

Questa è probabilmente una domanda molto semplice, ma come posso ottenere il giusto offset di un elemento in jQuery?

Posso fare:

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

ed è valido.

Ma sembra che:

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

è indefinito.

Allora come si fa a farlo in jQuery?

Grazie!!

jquery offset

— Alex
fonte

163

Alex, Gary:

Come richiesto, ecco il mio commento pubblicato come risposta:

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

Grazie per avermi fatto sapere.

In pseudo codice che può essere espresso come:

L'offset corretto è:

La larghezza della finestra MENO
(l' offset sinistro dell'elemento PIÙ la larghezza esterna dell'elemento )

— Brendon Crawford
fonte

questo non funziona con le trasformazioni CSS, offset sarà influenzato dalla trasformazione ma outerWidth (e width) no.

— Jonathan.

2

Questo è l'offset dal lato destro della finestra. Per l'offset dal lato sinistro della finestra, vedere la risposta di cdZ .

— Codebling

il bordo più a destra di un elemento può essere trovato in modo più "nativo" $whatever[0].getBoundingClientRect().right. questo è relativo al bordo sinistro della finestra.

— pstanton

Grazie Brendon. Risposta utile.

29

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

Riferimento: .outerWidth ()

— jAndy
fonte

1

penso sia necessario aggiungerli e poi meno 1. se la larghezza è 2, allora sinistra è a 10 e destra non è a 12 ma 11.

— nonopolarità

31

Questa è una risposta sbagliata. In CSS, "sinistra" implica "l'offset del punto più a sinistra dell'elemento dalla sinistra della finestra / genitore" e "destra" implica "l'offset del punto più a destra dell'elemento dalla destra della finestra / genitore ". Quindi, la risposta corretta sarebbe:var rt = ($(window).width() - ($whatever.offset().left + $whatever.outerWidth()));

— Brendon Crawford

5

@BrendonCrawford Dovresti spostare quel commento in una risposta.

— Gary

3

Una nota per chiunque arrivi: la risposta sopra è stata modificata per riflettere correttamente il commento fatto da Brendon.

— Chris Marasti-Georg

16

Forse sto fraintendendo la tua domanda, ma l'offset dovrebbe darti due variabili: una orizzontale e una verticale. Questo definisce la posizione dell'elemento. Quindi quello che stai cercando è:

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

e

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

Se hai bisogno di sapere dove si trova il giusto confine del tuo elemento, allora dovresti usare:

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

— Greg
fonte

9

Solo un'aggiunta a ciò che ha detto Greg:

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

Questo codice otterrà la giusta posizione rispetto al lato sinistro. Se l'intenzione era quella di ottenere la posizione del lato destro rispetto a destra (come quando si utilizza la rightproprietà CSS ), è necessaria un'aggiunta al codice come segue:

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

Questo codice è utile nelle animazioni in cui è necessario impostare il lato destro come ancoraggio fisso quando non è possibile impostare inizialmente la rightproprietà in CSS.

— cdZ
fonte

6

In realtà funzionano solo quando la finestra non viene fatta scorrere dalla posizione in alto a sinistra.
Devi sottrarre i valori di scorrimento della finestra per ottenere un offset utile per riposizionare gli elementi in modo che rimangano sulla pagina:

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
fonte

5

Brendon Crawford ha avuto la risposta migliore qui (nel commento), quindi la sposterò in una risposta fino a quando non lo farà (e forse espanderò un po ').

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

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

— Gary
fonte

5

C'è un'API DOM nativa che raggiunge questo obiettivo immediatamente getBoundingClientRect:

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

— Barney
fonte

2

Ma getBoundingClientRect restituisce rispetto al viewport non relativo al documento, che è ciò che fornisce offset ().

— Sai Dubbaka

2

Ottenere il punto di ancoraggio di un div/table (left) = $("#whatever").offset().left;- ok!

Per ottenere il punto di ancoraggio di un div/table (right)è possibile utilizzare il codice seguente.

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

— hyp3r byt3
fonte

come ottenere il giusto offset di un elemento? - jQuery