¿Hay alguna forma de obtener el cuadro delimitador (en píxeles) de un elemento DOM?

Question

¿Hay alguna forma de obtener las coordenadas del cuadro delimitador de un elemento DOM con Javascript?

Obviamente puedo calcularlo desde varias propiedades de CSS: width, height, y así sucesivamente.

Lo estoy preguntando porque hay muchas otras plataformas gráficas que ofrecen este método. Por ejemplo, aparentemente se puede hacer en XUL según this post, que describe un método getBoundingClientRect().

(Mi objetivo es comprobar si los dos elementos se superponen.)

Answer 1

Digamos que el elemento DOM tenía el ID myElement.

document.getElementById("myElement").offsetLeft; //Left side of box 
document.getElementById("myElement").offsetTop; //Top side of box 
document.getElementById("myElement").offsetLeft 
    + document.getElementById("myElement").offsetWidth; //Right side of box 
document.getElementById("myElement").offsetTop 
    + document.getElementById("myElement").offsetHeight; //Bottom side of box 

Para la parte inferior y derecha lados, el código básicamente añade la anchura o la altura de la caja de delimitación en el lado izquierdo o superior.

si se quería, se podría definir document.getElementById("myElement") de una vez y utilizar la referencia, de la siguiente manera:

var myElement = document.getElementById("myElement"); 
myElement.offsetLeft; //Left side of box 
myElement.offsetTop; //Top side of box 
myElement.offsetLeft + myElement.offsetWidth; //Right side of box 
myElement.offsetTop + myElement.offsetHeight; //Bottom side of box 

Answer 2

En realidad, hay un método integrado para obtener el rectángulo delimitador: Element.getBoundingClientRect

El método devuelve un objeto que contiene las coordenadas (visual) superior, derecha, inferior e izquierda del elemento, así como su ancho y alto.

Example (JSFiddle)

Más información:

• Element.getBoundingClientRect
• getBoundingClientRect is Awesome (John Resig)