Comment obtenir la hauteur d'une div sans jQuery ?

Obtenir la hauteur d'un div sans avoir besoin de jQuery

Les développeurs recherchent souvent des méthodes pour récupérer la hauteur d'un élément div sans s'appuyer sur des bibliothèques comme jQuery . Bien que la méthode .height() de jQuery soit communément citée, il existe des solutions JavaScript simples qui peuvent accomplir la même tâche efficacement.

Alternatives à la méthode .height() de jQuery

Pour Pour déterminer la hauteur d'un div uniquement via JavaScript, les développeurs peuvent utiliser les propriétés clientHeight ou offsetHeight de l'objet HTMLElement représentant le div. Voici comment fonctionne chaque propriété :

• clientHeight : cette propriété mesure la hauteur du contenu visible du div, y compris le remplissage mais à l'exclusion des bordures et des barres de défilement.
• offsetHeight : cette propriété renvoie la hauteur totale du div, y compris le remplissage, les barres de défilement et les bordures.

Implémentation

Pour récupérer la hauteur d'un div à l'aide de clientHeight, utilisez la syntaxe suivante :

<code class="javascript">var clientHeight = document.getElementById('myDiv').clientHeight;</code>

Alternativement, pour inclure des barres de défilement et des bordures dans la mesure, vous pouvez utiliser offsetHeight :

<code class="javascript">var offsetHeight = document.getElementById('myDiv').offsetHeight;</code>

Exemple

Voici un exemple pour démontrez l'utilisation des deux propriétés :

<code class="html"><div id="myDiv" style="height: 100px; padding: 20px; border: 10px solid black;">
    Content
</div></code>

<code class="javascript">var clientHeight = document.getElementById('myDiv').clientHeight; // Returns 80
var offsetHeight = document.getElementById('myDiv').offsetHeight; // Returns 130</code>

Dans cet exemple, clientHeight renvoie 80px car il exclut le remplissage et la bordure, tandis que offsetHeight renvoie 130px, y compris tous les éléments qui contribuent à la hauteur du div.

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!