Método offset

El método offset permite obtener la posición del elemento relativa al documento, a diferencia del método position, que obtiene las coordenadas relativas a los márgenes del padre. El método offset es más útil al posicionar un nuevo elemento sobre uno existente para manipulaciones globales, por ejemplo, para implementar arrastrar y soltar (drag-and-drop). Como resultado, el método devuelve un objeto que contiene las propiedades top y left. Pueden producirse errores en los cálculos si el usuario cambia el tamaño de la página. Además, el método no obtiene las coordenadas de elementos ocultos.

Sintaxis

Obtener las coordenadas actuales. En algunos casos los valores obtenidos pueden ser fraccionarios:

$(selector).offset();

Para cambiar las coordenadas del elemento, es necesario pasar un objeto que contenga las propiedades top y left:

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

También podemos aplicar una función determinada a cada elemento del conjunto. En este caso, el primer parámetro de la función recibirá el número del elemento en el conjunto, y el segundo parámetro - un objeto con las coordenadas top y left. this dentro de la función hará referencia al elemento actual. Los valores de las coordenadas del elemento cambiarán a aquellos que devuelva la función:

$(selector).width(function(número en el conjunto, {coordenadas actuales}));

Ejemplo

Obtengamos la posición del div (cuadrado verde), usando el método offset, y luego, accediendo a las claves del objeto obtenido, mostremos esta información:

<div id="result">haz clic en un cuadrado ...</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);
});

Ejemplo

Cambiemos las coordenadas del segundo párrafo:

<p style="margin-left: 10px;">texto1</p>
<p style="margin-left: 10px;">texto2</p>

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

Véase también

método position,
que permite obtener las coordenadas actuales del elemento
método offsetParent,
que permite obtener el antepasado posicionado más cercano del elemento
método css,
que permite obtener y cambiar los estilos CSS del elemento