Comment puis-je récupérer la hauteur d'un élément div dans jQuery même s'il n'a pas de règle de hauteur CSS définie ?

Comment récupérer la hauteur d'un div sans règle de hauteur CSS

Cela peut être frustrant lorsque vous devez déterminer la hauteur d'un élément, mais aucune règle de hauteur CSS n'est définie. Cependant, ne vous inquiétez pas ! jQuery propose une solution.

Utilisation de la méthode Height() de jQuery

Contrairement à ce que vous pouvez supposer, la méthode .height() de jQuery ne nécessite pas de hauteur CSS prédéfinie règle. Il calcule la hauteur rendue de l'élément, en tenant compte de son style calculé. Cela en fait une méthode efficace même dans les scénarios où aucune hauteur n'est explicitement définie.

Comprendre les options de calcul de la hauteur

jQuery propose plusieurs méthodes de calcul de la hauteur pour répondre à vos besoins spécifiques :

• .height() : renvoie la hauteur de l'élément, à l'exclusion du remplissage, des bordures et des marges.
• .innerHeight() : renvoie la hauteur, y compris le remplissage mais à l'exclusion des bordures et des marges.
• .outerHeight() : renvoie la hauteur, y compris les bordures mais à l'exclusion des marges.
• .outerHeight(true) : renvoie la hauteur, y compris les marges et tous les ornements.

Démonstration en direct

Voici un extrait de code pour démontrer les différentes méthodes de calcul de hauteur :

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

Ce code crée un div avec une hauteur de 180px, un remplissage de 10px , marge de 10px et bordure bleue. Il affiche ensuite la hauteur calculée à l'aide de chaque méthode. Vous pouvez inspecter le résultat rendu dans la console du navigateur.

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!