Element.getBoundingClientRect()

Você está lendo a versão em inglês deste conteúdo porque ainda não há uma tradução para este idioma. Ajude-nos a traduzir este artigo!

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:

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

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

Especificaçōes

Especificação Status Comentário
CSS Object Model (CSSOM) View Module
The definition of 'Element.getBoundingClientRect()' in that specification.
Rascunho atual Definiçāo Inicial

Notas

getBoundingClientRect() foi primeiramente introduzida no modelo de objeto MS IE DHTML.

O valor de retorno de getBoundingClientRect() é frozen.

Compatibilidade

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
getBoundingClientRectChrome Full support YesEdge Full support 12Firefox Full support 3IE Full support 4Opera Full support YesSafari Full support 6WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support 4
Notes
Full support 4
Notes
Notes Safari for iOS will modify the effective viewport based on the user zoom. This results in incorrect values whenever the user has zoomed.
Samsung Internet Android Full support Yes
heightChrome Full support YesEdge Full support YesFirefox Full support 3.5IE Full support 9Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android ? Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
widthChrome Full support YesEdge Full support YesFirefox Full support 3.5IE Full support 9Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android ? Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
xChrome Full support YesEdge No support No
Notes
No support No
Notes
Notes Returns a ClientRectList with ClientRect objects (which do not contain x and y properties) instead of DOMRect objects.
Firefox Full support YesIE No support No
Notes
No support No
Notes
Notes Returns a ClientRectList with ClientRect objects (which do not contain x and y properties) instead of DOMRect objects.
Opera Full support YesSafari No support NoWebView Android Full support YesChrome Android Full support YesFirefox Android ? Opera Android Full support YesSafari iOS ? Samsung Internet Android ?
yChrome Full support YesEdge No support No
Notes
No support No
Notes
Notes Returns a ClientRectList with ClientRect objects (which do not contain x and y properties) instead of DOMRect objects.
Firefox Full support YesIE No support No
Notes
No support No
Notes
Notes Returns a ClientRectList with ClientRect objects (which do not contain x and y properties) instead of DOMRect objects.
Opera Full support YesSafari No support NoWebView Android Full support YesChrome Android Full support YesFirefox Android ? Opera Android Full support YesSafari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.

Veja também