Ottieni e imposta la posizione con jQuery .offset ()


106

Come ottenere e impostare la posizione di un elemento con il .offsetmetodo jQuery ?

Diciamo che ho un div layer1e un altro layer2. Come posso ottenere la posizione layer1e impostare la stessa posizione su layer2?


6
Denise, hai anche controllato il metodo .offset () sul sito web jQuery? Inoltre, perché non accetti la risposta di Steve qui sotto ?!
Rafid

1
@Rafid praticamente non è mai tornata
jcollum

6
Posso avere i suoi punti?
ganders

Risposte:


191
//Get
var p = $("#elementId");
var offset = p.offset();

//set
$("#secondElementId").offset({ top: offset.top, left: offset.left});

7
Puoi semplicemente passare l'intero offsetoggetto, quindi //setdiventerebbe: $("#secondElementId").offset(offset)
mecampbellsoup

Hey! come posso impostare in basso e a destra del div? non c'è proprietà in basso a destra in offset
JerryGoyal

34

Raccomando un'altra opzione. jQuery UI ha una nuova funzione di posizione che consente di posizionare gli elementi l'uno rispetto all'altro. Per la documentazione completa e la demo vedere: http://jqueryui.com/demos/position/#option-offset .

Ecco un modo per posizionare i tuoi elementi utilizzando la funzione di posizione:

var options = {
    "my": "top left",
    "at": "top left",
    "of": ".layer1"
};
$(".layer2").position(options);

13
Questa risposta è stata respinta due volte, senza alcuna spiegazione. Per favore dimmi perché, se decidi di votare la mia risposta. Grazie!
KSev

2
Forse è perché usi jQuery UI mentre l'OP chiede solo jQuery.
carrozzina

7
spesso le persone si spingono troppo oltre con il voto negativo. Non supponiamo che una risposta più ampia sia inutile per gli altri anche se può essere un'espansione dell'OP. Non farmi iniziare con la "chiusura in quanto questa non è una domanda corretta";)
atterrato il

@KSev - Vengo dal futuro. jQuery non ha ancora un setter su .position... Vedi: api.jquery.com/position
Koshinae

@Koshinae Fa parte della "UI" di jQuery. Vedi il link sopra o prova jqueryui.com/position . Inoltre, se stai usando jQuery, potresti prendere in considerazione l'utilizzo di angularJS 2.0. Tuttavia, mi aspetto che tu stia mantenendo il codice legacy.
KSev

16

È fattibile ma devi sapere che usando offset()imposta la posizione dell'elemento rispetto al documento:

$('.layer1').offset( $('.layer2').offset() );

0

Ecco un'opzione. Questo è solo per le coordinate x.

var div1Pos = $("#div1").offset();
var div1X = div1Pos.left;
$('#div2').css({left: div1X});

offset (). left e css.left non sono la stessa cosa, possono o meno avere gli stessi valori a seconda della struttura della pagina.
Kalle

Ho fatto +1. Sembra funzionare bene per me ed è essenzialmente uguale alla risposta non scelta di seguito che ha più di 85 voti.
Paul Nelson Baker

Ha funzionato per me. Grazie per il contributo!
Erlend KH

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.