element.getBoundingClientRect

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨julio de 2015⁩.

El métodoElement.getBoundingClientRect() devuelve el tamaño de un elemento y su posición relativa respecto a la ventana de visualización (viewport).

Sintaxis

domRect = element.getBoundingClientRect();

El valor devuelto es un objetoDOMRect que es la unión de los rectángulos devueltos porgetClientRects()para el elemento, es decir, lasCSS border-boxes asociadas con el elemento. El resultado es el rectángulo más pequeño que contiene al elemento completo, con las propiedades de solo lecturaleft,top,right,bottom,x,y,width, andheight describiendo laborder-box total en pixels. Exceptowidth andheight las propiedades son relativas a la esquina superior izquierda (top-left) de la ventana.

Explicación de los valores DOMRect

Lasborder-boxes vacías son ignoradas. Si todas lasborder-boxes del elemento estan vacías, entonces se devuelve un rectángulo conwidth andheight iguales a cero donde eltop y elleft son el top-left de laborder-box de la primeraCSS box (en onden de contenido) para el elemento.

La cantidad descrolling realizado en la ventana (o cualquier otro elementoscrollable) se tiene en cuenta cuando se calcula el rectángulo. Esto implica que los bordes del rectángulo (top,left,bottom, andright) cambián sus valores cada vez que la posición descrolling cambia (ya que sus valores no son absolutos sino relativos a la ventana). Si se necesita elbounding rectangle relativo a la esquinatop-left del documento, hay que añadir la posición descrolling actual a las propiedadestop andleft (dicha posición descrolling puede obtenerse usandowindow.scrollX ywindow.scrollY) para obtener elbounding rectangle independiente de la posición descrolling.

Fallback para todos los navegadores

Los scripts que requieran una alta compatibilidadcross-browser pueden usarwindow.pageXOffset ywindow.pageYOffset en lugar dewindow.scrollX ywindow.scrollY. Si no se tiene acceso a esas propiedades puede usarse el siguiente código:

// Para scrollX(((t = document.documentElement) || (t = document.body.parentNode)) &&typeof t.scrollLeft == "number"  ? t  : document.body).scrollLeft(  // Para scrollY  ((t = document.documentElement) || (t = document.body.parentNode)) &&    typeof t.scrollTop == "number"    ? t    : document.body,).scrollTop;

Ejemplo

// rect es un objeto DOMRect con ocho propiedades: left, top, right, bottom, x, y, width, heightvar rect = obj.getBoundingClientRect();

Especificaciones

Specification
CSSOM View Module # dom-element-getboundingclientrect

Notas

El objetoDOMRect devuelto puede modificarse en navegadores modernos. Esto no era así en versiones anteriores que devolvíanDOMRectReadOnly de forma efectiva. Con IE y Edge, el hecho de no poder agregar propiedades faltantes a su objetoClientRectMSDN:ClientRect, devuelto impide rellenar los valoresx ey.

Debido a problemas de compatibilidad (ver a continuación), es más seguro confiar sólo en las propiedadesleft,top,right, andbottom.

Las propiedades en el objetoDOMRect devuelto no son suyas. Mientras que el operadorin yfor...in encontrarán las propiedades devueltas, otras API comoObject.keys() fallarán. Además, e inesperadamente, ES2015 y nuevas características comoObject.assign() y los operadores rest/spread de los objetos, no podrán copiar las propiedades devueltas.

rect = elt.getBoundingClientRect()// El resultado en emptyObj es {}emptyObj = Object.assign({}, rect)emptyObj = { ...rect }{width, ...emptyObj} = rect