Método getBoundingClientRect() do HTML DOM

Objeto Elemento DOM HTML

getBoundingClientRect()O método retorna o tamanho do elemento e sua posição relativa ao viewport (视口).

O valor retornado é um objeto DOMRect com oito propriedades: left, top, right, bottom, x, y, width e height.

Atenção:Ao calcular o retângulo de limite, deve-se considerar a quantidade de rolagem da área de exibição. Isso significa que sempre que a posição de rolagem mudar, os limites do retângulo (topo, esquerda, fundo e direita) alterarão seus valores.

Sintaxe:

element.getBoundingClientRect()

var div = document.getElementById("myDiv");
var rect = div.getBoundingClientRect();

Compatibilidade do Navegador

Método getBoundingClientRect() completamente suportado por todos os navegadores：

Detalhes Técnicos

Objeto Elemento DOM HTML