Comment déterminer la hauteur d'un élément dans jQuery sans règles de hauteur CSS explicites ?

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 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

<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>

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!