Ce blog montre l'utilisation de l'élément DOM clientHeight en HTML.
Comment utiliser l'élément DOM 'clientHeight' en HTML ?
Le ' clientHeight ” permet aux développeurs de calculer la hauteur du contenu visible d'un élément. Cela aide à positionner les éléments les uns par rapport aux autres ou à déterminer si un utilisateur a fait défiler jusqu'au bord droit d'un conteneur déroulant. Il fournit également des informations sur l'espace inutilisé restant sur la page Web.
Exemple
Passons en revue un exemple pour une meilleure démonstration de la propriété 'clientHeight'. Par exemple, le « sur clic ” event listener est utilisé pour afficher le résultat fourni par le “ clientHeight ' propriété:
< corps >
< h2 identifiant = 'élément' >< / h2 >
< h2 identifiant = 'élément' sur clic = 'showelementHeight()' >
Cliquez sur l'article Linuxhint pour afficher la taille !
< / h2 >
< scénario >
function showelementHeight() {
var example = document.getElementById('element');
var elementHeight= exemple.clientHeight;
alert('La hauteur est : ' + elementHeight + ' pixels.');
}
< / scénario > >
< / corps >
L'explication de l'extrait de code ci-dessus est décrite ci-dessous :
- Dans un premier temps, créez un ' ' tag à l'intérieur du '
” et fournissez-lui des données factices. Attribuez également un identifiant de ' élément ” à l'élément HTML sélectionné. - Ensuite, ajoutez un ' sur clic() ” écouteur d'événement qui invoque le “ showelementHeight() » lorsque l'utilisateur clique sur la fonction « ' élément.
- Puis, à l'intérieur du ' showelementHeight() ' La fonction crée une variable nommée ' exemple ' qui agit comme une instance pour l'élément HTML dont l'identifiant est ' élément ”.
- Ensuite, créez une autre variable nommée ' hauteurélément '' qui stocke le résultat fourni par la propriété 'clientHeight'.
- Après cela, affichez le ' hauteurélément '' variable sur la boîte d'alerte à l'aide de la alerte() ' méthode.
À la fin, ajoutez les propriétés CSS suivantes pour styliser le ' h2 ' élément:
< style >
#élément {
marge : 20px ;
rembourrage : 10px ;
arrière-plan- couleur : cyan foncé;
hauteur : 300 pixels ;
texte- aligner : centre;
doubler- hauteur : 100 pixels ;
}
< / style >
Dans l'extrait de code ci-dessus, les propriétés CSS suivantes sont attribuées à la div ayant un identifiant de ' élément ” :
- Le ' 20px ”, “ 10px ' et ' cyan foncé « les valeurs sont fournies au CSS » marge ”, “ rembourrage ' et ' Couleur de l'arrière plan ” propriétés, respectivement.
- Utilise également ' hauteur ”, “ aligner le texte ' et ' hauteur de la ligne ” Propriétés CSS pour améliorer la visibilité des utilisateurs.
Après l'exécution de l'extrait de code ci-dessus, la page Web apparaît comme ceci :
La sortie indique que la hauteur de l'élément sélectionné est affichée dans la boîte d'alerte, chaque fois que l'utilisateur clique sur l'élément.
Conclusion
Pour utiliser le ' clientHeight ” en HTML, sélectionnez l'élément HTML en accédant à l'attribut id. Après cela, attachez la propriété 'clientHeight' et affichez le résultat. C'est une propriété en lecture seule qui renvoie le résultat en pixels. La propriété 'clientHeight' fonctionne à l'intérieur de la balise '