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

Lors du développement de sites Web à l'aide de JavaScript, dans de nombreux cas, les développeurs doivent récupérer une largeur et une hauteur réelles d'un élément HTML. Par exemple, des éléments de dimensionnement dynamique ou de positionnement sur une page Web, ajustements de mise en page, etc.

Cet article expliquera les moyens de récupérer une largeur et une hauteur réelles d'un élément HTML.

Comment récupérer / obtenir la hauteur et la largeur réelles des éléments HTML?

Pour récupérer la largeur et la hauteur d'un élément HTML, utilisez les approches suivantes:

• En utilisant "ClientWidth" et "Clientheight" Propriétés
• En utilisant "Offsetwidth" et "hors de" Propriétés

Méthode 1: Récupérez la largeur et la hauteur réelles d'un élément HTML à l'aide de propriétés «Clientwidth» et «ClientHeight»

Utilisez le "ClientWidth" et "Clientheight»Propriétés pour récupérer la hauteur et la largeur réelles d'un élément HTML. «Clientwidth» et «ClientHeight» représentent les dimensions de la zone de contenu de l'élément, telles que la largeur intérieure et la hauteur d'un élément tandis que le rembourrage, la bordure et la marge sont exclus.

Syntaxe

Utilisez la syntaxe suivante pour obtenir la largeur et la hauteur d'un élément en utilisant les propriétés «Clientwidth» et «ClientHeight»:

élément.ClientWidth
élément.Clientheight

Exemple

Dans un fichier html, utilisez les éléments HTML "div","portée", et "H4«Pour afficher du texte sur la page:

> Pour apprendre JavaScript Suivez Linuxhint

Récupérer la largeur et la hauteur réelles de l'élément HTML

Maintenant, vérifiez la largeur et la hauteur d'un «div" élément. Donc, d'abord, obtenez la référence de l'élément div en utilisant le «getElementByid ()”Méthode en passant l'ID attribué comme argument:

Laissez div = documenter.getElementByid ('div');

Appelez les propriétés «Clientwidth» et «ClientHeight» avec un élément div et stockez leurs valeurs résultantes dans les variables «divwidth" et "divheight»:

Laissez divwidth = div.ClientWidth;
Laissez divheight = div.ClientHeight;

Imprimez la largeur et la hauteur de la div sur la console en utilisant le «console.enregistrer()" méthode:

console.log (divWidth, divheight);

La sortie montre la largeur de div "842"Et la hauteur qu'il contient est"59»:

Méthode 2: Récupérez la largeur et la hauteur réelles d'un élément HTML en utilisant les propriétés «OffsetWidth» et «Offsetheight»

Pour obtenir / récupérer la largeur et la hauteur réelles d'un élément, utilisez le «Offsetwidth" et "hors de" propriétés. «Offsetwidth» et «Offsetheight» sont des propriétés qui fournissent des informations sur les dimensions d'un élément pendant que le rembourrage, la bordure et la marge sont inclus.

Syntaxe

Suivez la syntaxe donnée pour les propriétés «OffsetWidth» et «Offsetheight»:

élément.Offsetwidth
élément.hors de

Exemple

Ici, nous verrons la largeur et la hauteur de l'élément H4 en utilisant les propriétés «OffsetWidth» et «Offsetheight»:

Laissez la largeur de tête =.OffsetWidth;
Laisser HeadingHeight = rupture.hors de la hauteur;

Sortir

Il s'agissait de récupérer la largeur et la hauteur réelles de l'élément HTML.

Conclusion

Pour récupérer une largeur et une hauteur réelles d'un élément HTML, utilisez le «ClientWidth" et "Clientheight" ou la "Offsetwidth" et "hors de" propriétés. «Clientwidth» et «ClientHeight» sont utilisés pour calculer la largeur et la hauteur d'un élément tandis que le rembourrage, la bordure et la marge sont exclus. La «transformation offset» et «offsetheight» calculent la largeur et la hauteur d'un élément, y compris la bordure, le rembourrage et la marge. Cet article a expliqué les moyens de récupérer une largeur et une hauteur réelles d'un élément HTML.