Trucos cortos de JavaScript

Obtener la posición absoluta de cualquier elemento HTML

El siguiente fragmento de código proporciona la posición absoluta de cualquier elemento HTML del árbol DOM. Es bastante útil para situar capas emergentes encima de un elemento concreto - ya sea en forma de ayudas o para menús.

La esencia de la función son las propiedades offsetLeft y offsetTop, que devuelven la posición relativa de un elemento respecto a su contenedor, que a su vez está almacenado en offsetParent.

function getAbsoluteElementPosition(element) {
  if (typeof element == "string")
    element = document.getElementById(element)
    
  if (!element) return { top:0,left:0 };
  
  var y = 0;
  var x = 0;
  while (element.offsetParent) {
    x += element.offsetLeft;
    y += element.offsetTop;
    element = element.offsetParent;
  }
  return {top:y,left:x};
}

La función acepta como parámetro o bien el ID de un elemento (una cadena), o bien el propio elemento como objeto. El valor de retorno es también un objeto con dos propiedades : top y left, que contienen la posición buscada.

Un ejemplo de uso podría ser el siguiente:

function test() {
  var elemento = document.getElementById('miboton');
  var pos = getAbsoluteElementPosition(elemento)
  
  alert("top="+pos.top+" left="+pos.left)
}

Pulsa Aquí   para probar la función "en vivo".

6.0+

1.5+

9.0+

Código Fuente

Comentarios

(c) 2006-2010 Alexander Hristov. Todos los derechos reservados
Más información sobre cursos de java, cursos de ajax, cursos de .NET,