Comment obtenir la hauteur d'un div lorsqu'aucune hauteur CSS explicite n'est définie ?

Déterminer la hauteur d'un div sans règle CSS explicite

Obtenir la hauteur d'un div peut être difficile s'il n'y a pas de hauteur explicitement définie dans le CSS. Bien que la méthode jQuery .height() soit généralement utilisée à cet effet, elle nécessite une règle CSS existante pour un fonctionnement correct. Voici une approche alternative :

Fonctions de hauteur jQuery

jQuery propose une gamme de fonctions de hauteur qui peuvent fournir des mesures de hauteur précises, même sans règles de hauteur CSS :

• .height() : Exclut le remplissage, la bordure et la marge.
• .innerHeight() : Inclut le remplissage mais exclut la bordure et la marge.
• .outerHeight() : Inclut la bordure mais exclut la marge.
• .outerHeight(true) : Inclut la marge.

Démo d'utilisation

L'extrait de code ci-dessous montre comment utiliser ces fonctions :

<code class="js">$(function() {
  var $heightTest = $('#heightTest');
  $heightTest.html('Div style set as "height: 180px; padding: 10px; margin: 10px; border: 2px solid blue;"')
    .append('<p>Height (.height() returns) : ' + $heightTest.height() + ' [Just Height]</p>')
    .append('<p>Inner Height (.innerHeight() returns): ' + $heightTest.innerHeight() + ' [Height + Padding (without border)]</p>')
    .append('<p>Outer Height (.outerHeight() returns): ' + $heightTest.outerHeight() + ' [Height + Padding + Border]</p>')
    .append('<p>Outer Height (.outerHeight(true) returns): ' + $heightTest.outerHeight(true) + ' [Height + Padding + Border + Margin]</p>')
});</code>

Sortie :

La hauteur calculée du div est affichée dans le div lui-même, fournissant des informations détaillées sur la sortie de chaque fonction.

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!