Comment puis-je obtenir la largeur et la hauteur réelles d'un élément HTML ?

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

Pour centrer un élément HTML dans la fenêtre d'affichage du navigateur, il est nécessaire de calculer avec précision ses dimensions. Voici comment récupérer efficacement la largeur et la hauteur réelles d'un élément.

Utilisation des propriétés des éléments

Les propriétés .offsetWidth et .offsetHeight de l'interface HTMLElement représentent la largeur réelle et la hauteur d'un élément, respectivement. Notez que ces propriétés font partie de l'élément, pas de son objet .style.

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

Utilisation de getBoundingClientRect()

Alternativement, la méthode getBoundingClientRect() peut être utilisé pour obtenir les dimensions et l'emplacement d'un élément dans la fenêtre sous forme de nombres à virgule flottante. Cela inclut la position, la largeur et la hauteur de l'élément après l'application des 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
//   ...
// }

Prise en charge des navigateurs

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

• Chrome
• Firefox
• Edge
• Safari
• Opera

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!