Comment puis-je déterminer la hauteur d'un div sans hauteur CSS définie ?

Déterminer la hauteur d'un div sans hauteur CSS définie

Obtenir la hauteur d'un élément peut être difficile lorsqu'aucune règle de hauteur n'est définie dans le CSS. C'est là que comprendre les différentes méthodes jQuery pour obtenir la hauteur devient crucial.

Contrairement à une idée fausse, la méthode .height() de jQuery ne repose pas sur une règle de hauteur CSS définie. Il détermine la hauteur calculée, qui inclut le contenu, le remplissage et les bordures de l'élément. Cela en fait un outil efficace pour récupérer la hauteur réelle d'un élément, que CSS la spécifie explicitement ou non.

Méthodes de mesure de la hauteur

jQuery propose trois méthodes principales pour mesurer la hauteur de l'élément :

• .height() : renvoie la hauteur de l'élément à l'exclusion du remplissage, de la bordure et de la marge.
• .innerHeight() : Renvoie la hauteur de l'élément, remplissage compris mais excluant la bordure et la marge.
• .outerHeight() : Renvoie la hauteur de l'élément, bordure comprise mais excluant la marge. Pour une mesure plus inclusive, utilisez .outerHeight(true) pour inclure également la marge.

Démonstration

L'extrait de code fourni démontre l'utilisation de ces méthodes :

$(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>')
});

En comprenant ces méthodes jQuery, vous pouvez obtenir efficacement la hauteur d'un élément, même lorsqu'aucune règle de hauteur CSS n'est définie.

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!