Método getBoundingClientRect() del DOM HTML

Objeto Elemento de HTML DOM

getBoundingClientRect()El método devuelve el tamaño del elemento y su posición relativa con respecto al viewport (ventana de visualización).

El valor devuelto es un objeto DOMRect con ocho propiedades: left, top, right, bottom, x, y, width, height.

Nota:Al calcular el rectángulo del límite, se debe considerar la cantidad de desplazamiento del área de visualización. Esto significa que cada vez que cambia la posición de desplazamiento, los bordes del rectángulo (arriba, izquierda, abajo y derecha) cambiarán sus valores.

Sintaxis：

element.getBoundingClientRect()

var div = document.getElementById("myDiv");
var rect = div.getBoundingClientRect();

Compatibilidad del navegador

El método getBoundingClientRect() es completamente compatible con todos los navegadores：

Detalles técnicos

Objeto Elemento de HTML DOM