Maison > interface Web > js tutoriel > Comment obtenir la hauteur d'une division en JavaScript pur : clientHeight vs offsetHeight

Comment obtenir la hauteur d'une division en JavaScript pur : clientHeight vs offsetHeight

Mary-Kate Olsen
Libérer: 2024-11-05 13:00:05
original
318 Les gens l'ont consulté

How to Get a Div's Height in Pure JavaScript: clientHeight vs. offsetHeight

Comment acquérir la hauteur d'un div avec du JavaScript pur

Si vous essayez d'obtenir la hauteur d'un div sans incorporer jQuery, ce guide concis vous équipera des solutions JavaScript nécessaires.

Obtenir la hauteur de la division avec JavaScript

L'utilisation de la méthode .height() de jQuery est une approche populaire, mais le JavaScript simple offre des méthodes tout aussi efficaces. Par exemple, vous pouvez utiliser les propriétés clientHeight ou offsetHeight :

<code class="javascript">var clientHeight = document.getElementById('myDiv').clientHeight;</code>
Copier après la connexion

Vous pouvez également utiliser offsetHeight :

<code class="javascript">var offsetHeight = document.getElementById('myDiv').offsetHeight;</code>
Copier après la connexion

Différences de propriétés

  • clientHeight inclut le remplissage mais exclut les bordures et barres de défilement.
  • offsetHeight englobe le remplissage, les bordures et les barres de défilement.

En résumé, si vous avez besoin de la hauteur combinée du contenu et du remplissage, clientHeight est idéal. Si vous avez besoin de la hauteur totale incluant tous les éléments environnants, utilisez offsetHeight.

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