Comment obtenir la hauteur d'un div sans règle de hauteur CSS définie ?

Comment récupérer la hauteur d'un div avec une règle de hauteur CSS non définie

Déterminer la hauteur d'un élément sans règle de hauteur CSS explicite peut être stimulant. Cependant, cela est possible en utilisant les méthodes fournies par la bibliothèque JavaScript jQuery.

Méthode jQuery .height

Contrairement à l'hypothèse initiale, la méthode jQuery .height() fait ne nécessite pas de règle de hauteur CSS prédéfinie. Il récupère la hauteur calculée de l'élément, en tenant compte de son style actuel. Cette méthode exclut le remplissage, la bordure et la marge par défaut.

Autres options

En plus de .height(), vous pouvez également utiliser les méthodes suivantes :

• .innerHeight() : renvoie la hauteur, y compris le rembourrage mais excluant la bordure et la marge.
• .outerHeight() : renvoie la hauteur, y compris la bordure mais hors marge.
• .outerHeight(true) : renvoie la hauteur, marge comprise.

Exemple

Considérez le Code HTML et jQuery suivant :

<code class="html"><div id="heightTest"></div>

<script>
  $(function() {
    var $heightTest = $('#heightTest');
    $heightTest.html('This is the test div.');

    console.log('Height (.height() returns): ', $heightTest.height());
    console.log('Inner Height (.innerHeight() returns): ', $heightTest.innerHeight());
    console.log('Outer Height (.outerHeight() returns): ', $heightTest.outerHeight());
    console.log('Outer Height (.outerHeight(true) returns): ', $heightTest.outerHeight(true));
  });
</script></code>

Sortie:

Height (.height() returns): 18px
Inner Height (.innerHeight() returns): 56px
Outer Height (.outerHeight() returns): 58px
Outer Height (.outerHeight(true) returns): 88px

Conclusion

Les méthodes jQuery fournissent un moyen de récupérer la hauteur d'un élément, qu'une règle de hauteur CSS soit définie ou non. Cette fonctionnalité est précieuse pour les composants Web dynamiques et les ajustements de mise en page.

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!