miércoles, 16 de octubre de 2013

HTML, Javascript: Cómo obtener la posición absoluta de un elemento HTML

En un determinado momento nos podría interesar recuperar la posición x, y absoluta de un elemento HTML de nuestra página independientemente de cuántos elementos más hayan en la página. Esto podría sernos útil si estamos trabajando dentro un elemento canvas.

Por ejemplo, centrándonos en Canvas, si dibujamos un círculo tendríamos que indicarle la posición X, Y donde queremos que empiece.

x = 20;
y = 10;
radio = 10;
ctx.arc(x, y, radio, 0, 2 * Math.PI);

Esto dibujaría un círculo partiendo de la posición relativa que le hemos especificado dentro del canvas. Cuando hablamos de posición relativa quiere decir que los valores siempre son tomando como referencia la posición del Canvas. Es decir si el Canvas se visualiza en cliente en la posición x = 40 la posición absoluta donde empieza nuestra circunferencia sería 40 + 20.

Podríamos aplicar este código para determinar si se ha producido un click en un punto más a la derecha que nuestra circunferencia.

Eventoclick.x >= x + 40;

Dado este caso, suponiendo que tenemos el canvas en un nivel justo inferior al documento HTML lo único que nos influye son los márgenes de la página. Podemos recuperar sin problemas el valor donde se encuentra el canvas usando la propiedad offsetLeft (todos los elementos HTML tienen esta propiedad).

areaTIC: Cómo obtener la posición absoluta de un elemento HTML, figura 1
EventoClick.x >= x + canvas.offsetLeft;

Ahora supongamos un escenario que se ajusta más a la realidad donde el Canvas no está en la raíz del documento sino que tiene como “padre” un elemento Div que a su vez está situado a la derecha de otro elemento Div.

areaTIC: Cómo obtener la posición absoluta de un elemento HTML, figura 2

Es importante saber que la propiedad offsetLeft devolverá la posición relativa respecto al elemento HTML que lo contiene, por tanto el código anterior dejaría de funcionar. Para que vuelva a funcionar necesitaríamos calcular recursivamente e ir sumando los offsetLeft de cada uno de los elementos superiores al Canvas hasta llegar al elemento root.

Hasta aquí el ejemplillo. Os copio una función que he encontrado en stackoverflow para calcular posiciones absolutas que funciona a la perfección.
function getOffset( el ) {
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
        _x += el.offsetLeft - el.scrollLeft;
        _y += el.offsetTop - el.scrollTop;
        el = el.offsetParent;
    }
    return { top: _y, left: _x };
}
var x = getOffset( document.getElementById('yourElId') ).left; 
Hasta aquí el artículo de hoy, recordar como siempre que podéis areaTIC a través de las principales redes sociales y enviar vuestras valoraciones, comentarios, etc... que vaya bien la semana!

No hay comentarios:

Publicar un comentario