determinando el ancho real y la altura de un elemento html

para centrar un elemento html dentro del visión del navegador, es necesario calcular con precisión sus dimensiones. Aquí le mostramos cómo recuperar el ancho y la altura reales de un elemento de manera eficiente.

usando las propiedades del elemento

el .OffsetWidth y .Offsetheight Propiedades de la interfaz htmlelement representan el ancho y la altura reales de un elemento, respectivamente. Tenga en cuenta que estas propiedades son parte del elemento, no su objeto .style.

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

usando getBoundingClientRect ()

[&] []] y ubicación de un elemento dentro de la ventana gráfica como números de punto flotante. Esto incluye la posición, el ancho y la altura del elemento después de aplicar las transformaciones CSS.

console.log (document.getElementById ('foo'). GetBoundingClientRect ()); // Producción: // Domrect { // ... // ancho: 631, // El ancho del elemento en píxeles // Altura: 54.7, // Altura del elemento en píxeles // ... //}

console.log(document.getElementById('foo').getBoundingClientRect());

// Output:
// DOMRect {
//   ...
//   width: 631,  // Element's width in pixels
//   height: 54.7, // Element's height in pixels
//   ...
// }

soporte de navegador

ambas técnicas son compatibles con los navegadores modernos, incluyendo:

chrome
firefox
borde
safari
ópera
]