MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Element.getBoundingClientRect()

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.
Working Draft Definiçāo Inicial

Notas

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

O valor de retorno de getBoundingClientRect() é frozen.

Compatibilidade

Funcionalidade Chrome Firefox (Gecko) Internet Explorer Opera Safari
Suporte básico 1.0[1] 3.0 (1.9) 4.0[2] (Yes) 4.0
width/height (Yes) 3.5 (1.9.1) 9 (Yes) (Yes)
Funcionalidade Android Chrome para Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suporte básico 2.0 1.0 1.0 (1.9) 6.0 (Yes) 4.0

[1] Especificação CSS para 'use' element faz referência ao elemento 'symbol' e requer valores padraão para width e height para o elemento 'use' seja determinado para 100%. Além disso, o spec para width e height em atributos 'svg' requer 100% como valores padrão. O Google Chrome naão segue esses requerimentos para o elemento 'use'. O Chrome também naão leva em consideração a propriedade 'stroke-width'. Sendo assim, getBoundingClientRect() pode retornar retângulos diferentes ao para o Chrome e para Firefox.

[2] No IE8 e suas versões anteriores, o objeto DOMRect retornado por getBoundingClientRect() carece das propriedades height e width. E propriedades adicionais, (incluindo height e width) também nāo podem ser adicionadas a esses objetos DOMRect.

Iniciando na versão do Gecko 12.0 (Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9), os efeitos de CSS transforms são levados em consideração ao computar os delimitadores do retângulo do elemento.

Veja também

Etiquetas do documento e colaboradores

 Colaboradores desta página: cezaraugusto, Daibushi
 Última atualização por: cezaraugusto,