Comment puis-je obtenir la largeur et la hauteur d'un élément HTML pour un centrage précis ?

Calcul de la largeur et de la hauteur d'un élément HTML pour le centrage

Pour centrer un élément HTML dans l'affichage du navigateur, il est crucial de déterminer sa largeur et sa hauteur réelles. Voici comment y parvenir :

1. Propriétés .offsetWidth et .offsetHeight

Vous pouvez récupérer la largeur et la hauteur de décalage de l'élément en utilisant :

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

2. Fonction .getBoundingClientRect()

Cette fonction fournit des informations plus détaillées sur les dimensions et l'emplacement de l'élément, en tenant compte des transformations CSS :

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

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

Prise en charge du navigateur :

• .offsetWidth et .offsetHeight : Tous les principaux navigateurs (IE8)
• .getBoundingClientRect() : Tous les principaux navigateurs (IE9)

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!