Déterminer la largeur et la hauteur réelles d'un élément HTML

pour centrer un élément HTML dans la vue du navigateur, il est nécessaire de calculer précisément ses dimensions. Voici comment récupérer efficacement la largeur et la hauteur réelles d'un élément.

en utilisant les propriétés des éléments

La .OffsetWidth et .offsetheight des propriétés de l'interface htmlelement représentent respectivement la largeur et la hauteur réelles d'un élément. Notez que ces propriétés font partie de l'élément, et non son objet .Style.

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

en utilisant GetBoundingClientRect ()

Dimensions et emplacement d'un élément dans la fenêtre en tant que numéros à virgule flottante. Cela inclut la position, la largeur et la hauteur de l'élément après avoir appliqué les transformations CSS.

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

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

support du navigateur

Les deux techniques sont prises en charge dans les navigateurs modernes, y compris:

• chrome
• firefox
• edge
• safari
• opéra