Comment puis-je déterminer avec précision les dimensions d'un élément HTML ?

Comment calculer les dimensions réelles d'un élément HTML

Déterminer la largeur et la hauteur précises d'un élément HTML est crucial pour l'aligner correctement. Cet article explore diverses techniques pour récupérer les dimensions réelles et fournit des détails de compatibilité entre différents navigateurs.

.offsetWidth et .offsetHeight

Concept : Ces propriétés indiquent la largeur et la hauteur de un élément, y compris le rembourrage et border.

Exemple :

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

Support des navigateurs : Tous les principaux navigateurs

.getBoundingClientRect()

Concept : Cette méthode renvoie un objet DOMRect contenant diverses dimensions et coordonnées, y compris la largeur et la hauteur après application des transformations CSS.

Exemple :

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

Sortie :

DOMRect {
    bottom: 177,
    height: 54.7,
    left: 278.5,​
    right: 909.5,
    top: 122.3,
    width: 631,
    x: 278.5,
    y: 122.3,
}

Navigateur Prise en charge :

• Navigateurs de bureau : Chrome, Edge, Firefox, Safari
• Navigateurs mobiles : Chrome pour Android, iOS Safari

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!