La posizione degli elementi

In questa lezione, vediamo come recuperare o impostare la posizione di un elemento specificato con i metodi .offset() e .position().

I metodi .offset() e .position()

Esistono due metodi in jQuery per la posizione degli elementi: .offset() e .position(). Ecco a cosa servono:

Recuperare la posizione

Per recuperare la posizione di un elemento, possiamo utilizzare .offset() o .position() in base alle nostre esigenze. Ecco come utilizzarli:

La proprietà lato può essere top oppure left, in quanto sia .offset() che .position() restituiscono un oggetto che contiene la posizione dell'elemento. Queste due proprietà restituiscono la posizione rispetto all'alto (top) e alla sinistra (left).

Vediamo un esempio con .offset():

<div style="padding:20px">
  <p id="el">Un testo di esempio</p>
</div>

<script>
  const offset = $("#el").offset();
  alert("Offset: "+ offset.top +"px, "+ offset.left +"px");
  // Posizione rispetto alla pagina
</script>

Nell'esempio, abbiamo salvato $("#el").offset() in una costante (che puoi trovare nella lezione dedicata), e poi abbiamo recuperato sia la posizione in alto (offset.top) sia quella a sinistra (offset.left).

Facciamo la stessa cosa per .position():

<div style="padding:20px">
  <p id="el">Un testo di esempio</p>
</div>

<script>
  const pos = $("#el").position();
  alert("Position: "+ pos.top +"px, "+ pos.left +"px");
  // Posizione rispetto al <div>
</script>

In questo caso, la posizione è rispetto all'elemento padre, il <div>.

Impostare una nuova posizione

Per impostare una nuova posizione ad un elemento, possiamo utilizzare soltanto .offset(). Ecco la sintassi:

Il valore da specificare sia per top che per left deve essere un numero, che corrisponde alle coordinate in pixel della nuova posizione dell'elemento. Vediamo un esempio:

<p id="el">Un testo di esempio</p>
<button id="btn">Sposta l'elemento</button>

<script>
  $("#btn").click(function(){
    $("#el").offset({top:100,left:50});
  });
</script>

Nell'esempio, abbiamo usato un evento di click: quando l'utente clicca sul pulsante, il testo viene spostato.