Obtenez la hauteur de l'élément div en javascript

Obtenir la hauteur de l'élément DIV en JavaScript est très utile pour appliquer une disposition appropriée au modèle d'objet de document (DOM), ce qui fait ressortir un site Web et se traduit par attirer l'attention de l'utilisateur. Par exemple, en créant une page Web ou un site Web particulier, les fonctionnalités et fonctionnalités ajoutées nécessitent une mise en forme appropriée pour s'accumuler sans modifier la conception du document.

Cet article démontrera les approches pour obtenir la hauteur de l'élément DIV en JavaScript.

Comment obtenir la hauteur de l'élément div en javascript?

Les approches suivantes peuvent être utilisées pour obtenir la hauteur de l'élément DIV en JavaScript:

• "hors de" Propriété.
• "Clientheight" Propriété.
• "faire défiler" Propriété.
• "jquery" Approche.

Approche 1: Obtenez la hauteur de l'élément DIV en JavaScript en utilisant la propriété Offsetheight

Le "hors de»La propriété renvoie la hauteur extérieure d'un élément comprenant le rembourrage ainsi que les bordures. Cette propriété peut être implémentée pour calculer la hauteur de l'en-tête accessible sur le bouton cliquer.

Syntaxe

élément.hors de

Ici, "élément»Correspond à l'élément à calculer pour la hauteur.

Exemple

Dans l'exemple ci-dessous:

• Spécifiez le div suivant avec une classe assignée.
• Incluez également la rubrique spécifiée à l'intérieur pour être calculée pour le «hauteur".
• Maintenant, créez un bouton avec un "sur clic”Événement invoquant la fonction divheight ().
• Après cela, allouer les titres afin d'afficher la hauteur calculée:

Ceci est le site Web de Linuxhint

Obtenez la hauteur de l'élément div

La hauteur de l'élément div est:

Dans le code JS supplémentaire:

• Dans le code JS ci-dessous, déclarer une fonction nommée «Divheight ()".
• Dans sa définition, accédez au div assigné par sa classe en utilisant le «document.QuerySelector ()«Méthode et la tête de la hauteur calculée en utilisant le«document.getElementByid ()" méthode.
• Après cela, appliquez le «hors de”Propriété pour calculer la hauteur extérieure de l'en-tête spécifié et l'afficher dans la rubrique allouée discutée avant d'utiliser le«texte de texte" propriété:

fonction divheight ()
Let GetDiv = document.Queryselector ('.élément');
Let Get = Documer.GetElementByid ("tête")
Let Hight = GetDiv.hors de la hauteur;
obtenir.InnerText = + hauteur

Sortir

Dans la sortie ci-dessus, il est évident que la hauteur est calculée.

Approche 2: Obtenez la hauteur de l'élément DIV en JavaScript à l'aide de la propriété ClientHeight

Le "Clientheight»La propriété, en revanche, calcule la hauteur intérieure de l'élément, y compris le rembourrage mais à l'exclusion des frontières. Cette propriété peut être appliquée de la même manière à l'image incluse dans l'élément div.

Syntaxe

élément.Clientheight

Ici, de même "élément»Correspond à l'élément à calculer pour la hauteur.

Exemple

• Répétez les approches ci-dessus pour spécifier le «div" classe.
• Ici, spécifiez l'image suivante à calculer pour le «hauteur".
• De même, allouer une rubrique pour la hauteur calculée et créer un bouton avec un événement attaché "sur clic" comme indiqué:

La hauteur de l'élément div est:

Obtenez la hauteur de l'élément div

Dans la fonction JS ci-dessous:

• Définissez une fonction nommée «Divheight ()".
• Répétez les approches ci-dessus pour accéder au «div”Element et le titre inclus.
• Après cela, appliquez le «Clientheight”Propriété pour calculer la hauteur extérieure de l'image spécifiée dans le code ci-dessus et le renvoyer comme une rubrique:

fonction divheight ()
LET BOX = Document.Queryselector ('.élément');
Let Get = Documer.getElementByid ('tête')
LET HAGEL = BOX.ClientHeight;
obtenir.InnerText = + hauteur

Sortir

À partir de la sortie ci-dessus, on peut observer que la fonctionnalité requise est obtenue.

Approche 3: Obtenez la hauteur de l'élément DIV en JavaScript à l'aide de la propriété ScrollHeight

Le "faire défiler«La propriété est identique au«Clientheight”Propriété car elle renvoie la hauteur d'un élément avec le rembourrage, mais pas les bordures. Cette propriété peut être appliquée à la table créée pour calculer sa hauteur.

Syntaxe

élément.faire défiler

Dans la syntaxe donnée, "élément»Correspond également à l'élément à calculer pour la hauteur.

Exemple

• Tout d'abord, incluez le «div"Elément avec le spécifié"classe"Et un" attaché "onduir»Redirection des événements vers la fonction divheight ().
• Ensuite, créez une table avec les valeurs de cap et de données spécifiées.
• De même, relancez la méthode discutée pour allouer une rubrique pour afficher la hauteur calculée:

IDENTIFIANT.	Nom	Âge
1	Harceler	18
2	David	46

Dans le code JS suivant, suivez les étapes indiquées:

• Définissez la fonction nommée «Divheight ()".
• Accéder au "div" élément.
• Enfin, appliquez le «faire défiler»Propriété pour retourner la hauteur de la table créée:

fonction divheight ()
Let GetDiv = document.Queryselector ('.élément');
Let Hight = GetDiv.ScrollHeight;
console.Log ("La hauteur de l'élément div est:", + hauteur)

Sortir

Approche 4: Obtenez la hauteur de l'élément DIV en JavaScript en utilisant l'approche jQuery

Cette approche renvoie la hauteur de l'en-tête ainsi que le paragraphe de l'élément DIV à l'aide d'une bibliothèque jQuery.

Exemple

• Dans la démonstration ci-dessous, incluez la bibliothèque jQuery spécifiée afin d'appliquer ses méthodes.
• Ensuite, spécifiez le «div»Et contiennent le cap et le paragraphe suivant à calculer pour la hauteur.
• Après cela, relancez les méthodes discutées pour créer un bouton et attribuer une rubrique pour que la hauteur résultante y soit affichée:

Javascrip

JavaScript est un langage de programmation très efficace qui peut également être intégré à HTML pour effectuer diverses fonctionnalités supplémentaires dans la conception d'une page Web particulière ou du site Web. Il en résulte d'attirer les utilisateurs et d'améliorer la conception globale des documents.


Obtenez la hauteur de l'élément div

Dans le code indiqué ci-dessous:

• Dans le code jQuery, appliquez le «prêt()”Méthode afin d'exécuter le code supplémentaire dès que le modèle d'objet de document (DOM) est chargé.
• Maintenant, appliquez le «Cliquez sur()”Méthode qui exécutera la fonction spécifiée sur le bouton cliquer
• Enfin, sur le bouton CLIC, accédez au «div«Element, et appliquez le«hauteur()”Méthode pour lui renvoyer ainsi sa hauteur:

$ (document)
.ready (function ()
$ ("bouton").cliquez sur (fonction ()
var divheight = $ ("# élément").hauteur();
$ ("# Result").html ("La hauteur de l'élément div est:" + divheight);
);
);

Sortir

Cet article a compilé les approches pour obtenir la hauteur de l'élément div en javascript.

Conclusion

Le "offsheighT »Propriété, le«Clientheight»Propriété, le«faire défiler«Propriété, ou le«jquery»Une approche peut être utilisée pour obtenir la hauteur de l'élément DIV en JavaScript. La propriété Offsetheight peut être appliquée pour calculer la hauteur extérieure de la rubrique accessible sur le bouton cliquer. La propriété ClientHeight et la propriété ScrollHeight peuvent être optées pour calculer la hauteur intérieure de l'élément. L'approche jQuery peut également être mise en œuvre en incluant sa bibliothèque et en utilisant ses méthodes pour effectuer les calculs requis. Cet article a démontré les approches qui peuvent être appliquées pour obtenir la hauteur de l'élément DIV en JavaScript.