Maison >interface Web >js tutoriel >Comment puis-je obtenir la largeur et la hauteur d'un élément HTML pour un centrage précis ?

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

Linda Hamilton
Linda Hamiltonoriginal
2024-12-04 01:25:12814parcourir

How Can I Get the Width and Height of an HTML Element for Precise Centering?

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn