Czy istnieje sposób na uzyskanie obwiedni (w pikselach) elementu DOM?

Question

Czy istnieje sposób, aby uzyskać współrzędne prostokąta elementu DOM z Javascriptem?

Oczywiście mogę obliczyć go z różnych właściwości CSS: width, height i tak dalej.

Pytam, ponieważ istnieje wiele innych platform graficznych, które zapewniają to jako metodę. Na przykład, najwyraźniej można to zrobić w XUL według this post, która opisuje metodę getBoundingClientRect().

(Moim celem jest sprawdzenie, czy dwa elementy nakładają się na siebie.)

Answer 1

Powiedzmy, że elementem DOM miał identyfikator 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 

Dla dolnej i prawej strony, kod w zasadzie dodaje szerokość lub wysokość obwiedni do lewej lub górnej strony.

Jeśli chciał, można zdefiniować document.getElementById("myElement") raz i użyć odniesienia, co następuje:

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

Faktycznie, istnieje wbudowanej metody, aby uzyskać prostokąta obwiedni: Element.getBoundingClientRect

metoda zwraca obiekt zawierający (wizualne) górną, prawą, dolną i lewą współrzędną elementu oraz jego szerokość i wysokość.

Example (JSFiddle)

Więcej informacji:

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