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 July 2015.

O método Element.getBoundingClientRect() retorna o tamanho de um elemento e sua posição relativa ao viewport.

Sintaxe

rectObject = object.getBoundingClientRect();

Valor de retorno

O valor de retorno é o objeto DOMRect que é a uniāo dos retângulos retornados por getClientRects() para o elemento, ou seja, os atributos border-boxes do CSS associados ao elemento.

O valor retornado é um objeto DOMRect, que contém as propriedades apenas-leitura left, top, right e bottom que descrevem o border-box em pixels. top e left são relativos às propriedades top-left do viewport.

Nota: Gecko 1.9.1 adiciona as propriedades width e height ao objeto DOMRect.

Border-boxes vazias são completamente ignoradas. Se todos os border-boxes do elemento são vazias, então é retornado o retângulo com width e height como zero, e no lugar de top e left determina-se o top-left do border-box relacionado ao primeiro box CSS (determinado pela ordem do conteúdo) em relaçāo ao elemento.

A quantidade de scrolling que foi feita na área do viewport (ou qualquer outra área de qualquer outro elemento scrollable) é tomada com medida ao computar o delimitador do retângulo. Isso significa que as propriedades top e left mudam seus valores tão logo a posiçāo do scroll for alterada (assim seus valores sāo relativos ao viewport e não são absolutos). Se esse não for o comportamento esperado basta adicionar a posição atual do scroll para as propriedades top e left (via window.scrollX e window.scrollY) para pegar os valores constantes independentemente da posiçāo atual do scroll.

Scripts que requerem uma alta compatibilidade cross-browser podem usar window.pageXOffset e window.pageYOffset ao invés de window.scrollX e window.scrollY. Scripts sem acesso ao window.pageXOffset, window.pageYOffset, window.scrollX e window.scrollY podem usar:

js
// Para o scrollX
(((t = document.documentElement) || (t = document.body.parentNode)) &&
typeof t.ScrollLeft == "number"
  ? t
  : document.body
).ScrollLeft(
  // Para o scrollY
  ((t = document.documentElement) || (t = document.body.parentNode)) &&
    typeof t.ScrollTop == "number"
    ? t
    : document.body,
).ScrollTop;

Exemplo

js
// rect é um objeto DOMRect com seis propriedades: left, top, right, bottom, width, height
var rect = obj.getBoundingClientRect();

Especificações

Specification
CSSOM View Module
# dom-element-getboundingclientrect

Compatibilidade com navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
getBoundingClientRect

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

Veja também