MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

 

Imagen:traduccion-pendiente.png Esta página está traduciéndose a partir del artículo DOM:element.getBoundingClientRect, razón por la cual puede haber algunos errores sintácticos o partes sin traducir. Puedes colaborar continuando con la traducción


Resumen

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

rectObject = object.getBoundingClientRect();

Devuelve

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 elmento. 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.

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 is taken into account when computing the bounding rectangle. 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.

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

// For scrollX

(((t = document.documentElement) || (t = document.body.parentNode))
   && typeof t.scrollLeft == 'number' ? t : document.body).scrollLeft

// For 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, height
var rect = obj.getBoundingClientRect();

Especificaciones

Browser compatibility

Característica Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Soporte básico 1.0 [1] (Yes) 3.0 (1.9) [3] 4.0 [2] (Yes) 4.0
width/height (Yes) (Yes) 3.5 (1.9.1) [3] 9 (Yes) (Yes)
x/y No support No support [4] (Yes) No support [4] ? No support
Característica Android Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Soporte básico 2.0 1.0 (Yes) 1.0 (1.9) 6.0 (Yes) 4.0

[1] CSS spec for 'use' element referencing 'symbol' element requires default width and height for the <use> element set to 100%. Also spec for width and height 'svg' attributes requires 100% as default values. Google Chrome does not follow these requirements for <use>. Also Chrome does not take stroke-width into account. So getBoundingClientRect() may return different rectangles for Chrome and for Firefox.

[2] In IE8 and below, the DOMRect object returned by getBoundingClientRect() lacks height and width properties. Also, additional properties (including height and width) cannot be added onto these DOMRect objects.

[3] Gecko 1.9.1 adds width and height properties to the DOMRect object.

Starting in Gecko 12.0 (Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9), the effect of CSS transforms is considered when computing the element's bounding rectangle.

[4] IE and Edge return a (ClientRectList with) MSDN: ClientRect objects which do not contain x and y properties, instead of DOMRect objects

See also

Etiquetas y colaboradores del documento

 Colaboradores en esta página: joseanpg, jzatarain, fscholz, jsx, HenryGR, Mgjbot
 Última actualización por: joseanpg,