Détermination de la hauteur des éléments sans règles de hauteur CSS

En l'absence de règle de hauteur CSS pour un élément, il peut être difficile d'obtenir sa hauteur. La méthode jQuery .height(), qui nécessite une valeur de hauteur CSS prédéfinie, semble inadéquate dans ce scénario. Cependant, il existe des méthodes alternatives pour déterminer la hauteur d'un élément.

jQuery .height()

Contrairement à la croyance populaire, jQuery .height() ne s'appuie pas sur sur une définition de hauteur CSS. Il calcule la hauteur calculée de l'élément, ce qui le rend adapté aux scénarios dans lesquels aucune hauteur CSS explicite n'est spécifiée.

DEMO

.height() : récupère la hauteur de l'élément. sans remplissage, bordure ou marge.

.innerHeight() : récupère la hauteur de l'élément, y compris le remplissage mais à l'exclusion de la bordure et de la marge.

.outerHeight() : récupère la hauteur de l'élément, y compris la bordure mais à l'exclusion margin.

.outerHeight(true) : récupère la hauteur de l'élément, y compris la bordure et la marge.

Extrait de code pour la démo en direct

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