jQuery offset(): Obtener o establecer las coordenadas de un elemento

Repaso a la función de jQuery offset() que tiene como funcionalidad obtener o establecer las coordenadas de un elemento dentro del DOM de una página web. Es muy similar a la función position(),

La diferencia entre offset() y position() es:

• offset(): Establece o devuelve las coordenadas de un elemento respecto al documento/web contenedor del mismo (toda la web).
• position(): Establece o devuelve las coordenadas de un elemento relativas al elemento padre.

Otras funciones de jQuery interesantes son:

• css()
• html()
• text()
• animate()
• scrollTop() y scrollLeft()

Sintaxis de la función de jQuery offset()

Repasemos su sintaxis extraída de su web oficial:

/* obtener valor */$(selector).offset();
/* establecer valor */$(selector).offset({top:value,left:value});

Os explico las 2 sintaxis superiores:

• selector (Obligatorio): Elemento selector del cual queremos obtener o establecer sus coordenadas.
• En la primera sintaxis estaríamos obteniendo las coordenadas de un elemento. Devuelve un objeto con 2 propiedades (top y left) del primer elemento buscado.
• En la segunda establecemos con las coordenadas top y left la posición de dicho elemento.

Ejemplo de la función de jQuery offset() para obtener las coordenadas de un elemento

Vayamos con un primer ejemplo de offset():

$("#boton").click(function(){
    var coordenadas = $("#parrafo").offset();
    $("#parrafo").html("Y: " + coordenadas.top + " X: " + coordenadas.left);
});

Os explico el ejemplo:

• Detectamos el click en el botón con id = «boton».
• En la variable coordenadas guardamos el objeto con las coordenadas el elemento con id = «parrafo».
• Por último en el elemento con id = «parrafo» mediante la función html() mostramos las coordenadas de dicho elemento.

Ejemplo de la función de jQuery offset() para establecer las coordenadas de un elemento

Vayamos con el segundo ejemplo de offset() para establecer las coordenadas a un elemento:

$("#boton").click(function(){
 $("#parrafo").offset({top: 800, left: 200});
});

Os comento el segundo ejemplo:

• Detectamos el click en el botón con id = «boton».
• En el elemento con id = «parrafo» mediante la función offset() establecemos las coordenadas de dicho elemento (800px coordenada Y, 200 px de coordenada X).