element.getBoundingClientRect

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

Sintaxis

js
domRect = element.getBoundingClientRect();

Valor

El valor devuelto es un objeto DOMRect que es la unión de los rectángulos devueltos por getClientRects()para el elemento, es decir, las CSS 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 lectura left, top, right, bottom, x, y, width, and height describiendo la border-box total en pixels. Excepto width and height las propiedades son relativas a la esquina superior izquierda (top-left) de la ventana.

Explicación de los valores DOMRect

Las border-boxes vacías son ignoradas. Si todas las border-boxes del elemento estan vacías, entonces se devuelve un rectángulo con width and height iguales a cero donde el top y el left son el top-left de la border-box de la primera CSS box (en onden de contenido) para el elemento.

La cantidad de scrolling realizado en la ventana (o cualquier otro elemento scrollable) se tiene en cuenta cuando se calcula el rectángulo. Esto implica que los bordes del rectángulo (top, left, bottom, and right) cambián sus valores cada vez que la posición de scrolling cambia (ya que sus valores no son absolutos sino relativos a la ventana). Si se necesita el bounding rectangle relativo a la esquina top-left del documento, hay que añadir la posición de scrolling actual a las propiedades top and left (dicha posición de scrolling puede obtenerse usando window.scrollX y window.scrollY) para obtener el bounding rectangle independiente de la posición de scrolling.

Fallback para todos los navegadores

Los scripts que requieran una alta compatibilidad cross-browser pueden usar window.pageXOffset y window.pageYOffset en lugar de window.scrollX y window.scrollY. Si no se tiene acceso a esas propiedades puede usarse el siguiente código:

js
// 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

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

Especificaciones

Specification
CSSOM View Module
# dom-element-getboundingclientrect

Notas

El objeto DOMRect devuelto puede modificarse en navegadores modernos. Esto no era así en versiones anteriores que devolvían DOMRectReadOnly de forma efectiva. Con IE y Edge, el hecho de no poder agregar propiedades faltantes a su objeto ClientRect MSDN: ClientRect, devuelto impide rellenar los valores x e y.

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

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

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

Compatibilidad con navegadores

BCD tables only load in the browser

Véase también