Maison > interface Web > js tutoriel > Comment puis-je déterminer avec précision les dimensions d'un élément HTML ?

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

Linda Hamilton
Libérer: 2024-12-07 05:54:13
original
235 Les gens l'ont consulté

How Can I Accurately Determine the Dimensions of an HTML Element?

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;
Copier après la connexion

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())
Copier après la connexion

Sortie :

DOMRect {
    bottom: 177,
    height: 54.7,
    left: 278.5,​
    right: 909.5,
    top: 122.3,
    width: 631,
    x: 278.5,
    y: 122.3,
}
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal