Determinando a largura e a altura reais de um elemento html

para centralizar um elemento HTML na viewport do navegador, é necessário calcular com precisão as dimensões. Aqui está como recuperar a largura e a altura reais de um elemento com eficiência. Observe que essas propriedades fazem parte do elemento, não seu objeto .style. dimensões e localização de um elemento dentro da viewport como números de ponto flutuante. Isso inclui a posição, a largura e a altura do elemento após a aplicação de transformadas CSS. // Saída: // domrect { // ... // Largura: 631, // Largura do elemento em pixels // altura: 54.7, // altura do elemento em pixels // ... //}

Browser Support

Ambas as técnicas são suportadas nos navegadores modernos, Incluindo:

const width = document.getElementById('foo').offsetWidth;

firefox

const width = document.getElementById('foo').offsetWidth;