Metodo offset

Il metodo offset consente di ottenere la posizione di un elemento rispetto al documento, a differenza del metodo position, che ottiene le coordinate relative ai margini del genitore. Il metodo offset è più utile per posizionare un nuovo elemento sopra uno esistente per manipolazioni globali, ad esempio, per implementare il trascinamento (drag-and-drop). Come risultato, il metodo restituisce un oggetto, contenente le proprietà top e left. Errori di calcolo possono verificarsi se l'utente cambia le dimensioni della pagina. Inoltre, il metodo non ottiene le coordinate di elementi nascosti.

Sintassi

Ottenere le coordinate correnti. In alcuni casi i valori ottenuti possono essere frazionari:

$(selettore).offset();

Per cambiare le coordinate di un elemento, è necessario passare un oggetto contenente le proprietà top e left:

$(selettore).offset({top: 40, left: 40});

Possiamo anche applicare una determinata funzione a ogni elemento nel set. In questo caso, la funzione riceve come primo parametro il numero dell'elemento nel set, e come secondo parametro l'oggetto con le coordinate top e left. this all'interno della funzione indicherà l'elemento corrente. I valori delle coordinate dell'elemento cambieranno in quelli restituiti dalla funzione:

$(selettore).width(function(numero nel set, {coordinate correnti}));

Esempio

Otteniamo la posizione del div (quadrato verde), utilizzando il metodo offset, e poi, accedendo alle chiavi dell'oggetto ottenuto, visualizziamo queste informazioni:

<div id="result">clicca un quadrato ...</div>
<div id="test"></div>

#test {
	position: absolute;
	top: 40px;
	left: 40px;
	width: 100px;
	height: 100px;
	background: green;
	color: white;
	margin-top: 10px;
	cursor: pointer;
}

$('*', document.body).click(function(event) {
	let offset = $(this).offset();
	
	event.stopPropagation();
	$('#result').text('Left: ' + offset.left + ', Top: ' + offset.top);
});

Esempio

Cambiamo le coordinate del secondo paragrafo:

<p style="margin-left: 10px;">testo1</p>
<p style="margin-left: 10px;">testo2</p>

$('p').last().offset({top: 40, left: 60});

Vedi anche

metodo position,
che consente di ottenere le coordinate correnti di un elemento
metodo offsetParent,
che consente di ottenere il più vicino antenato posizionato di un elemento
metodo css,
che consente di ottenere e cambiare gli stili CSS di un elemento