Récupération de la hauteur des éléments masqués avec jQuery

Lorsque vous travaillez avec des éléments masqués, il peut être nécessaire de récupérer leurs dimensions à diverses fins. Cependant, les méthodes conventionnelles permettant d'obtenir la hauteur d'un élément peuvent échouer si l'élément n'est pas visible.

Approche inefficace

L'approche décrite consistant à afficher temporairement l'élément, en mesurant sa hauteur, puis le cacher à nouveau est encombrant et inefficace.

Solution alternative

jQuery fournit une solution plus efficace solution :

1. Modifier les attributs de l'élément : Manipuler temporairement les attributs de style de l'élément :

   • Définir la position sur absolue (facultatif si l'élément est déjà positionné de manière absolue)
   • Définir la visibilité sur caché (rendre l'élément invisible)
   • Définir l'affichage sur bloquer (rendre l'élément visible, mais pas dans le flux principal du document)
2. Mesurer la hauteur : Récupérez la hauteur de l'élément à l'aide de la méthode .height() de jQuery.
3. Restaurer Attributs : Réinitialisez les attributs de style de l'élément à leurs valeurs d'origine à l'aide de la méthode attr() ou en définissant la propriété style. directement.

Exemple de code

var previousCss = $("#myDiv").attr("style");

$("#myDiv").css({
    position: 'absolute',
    visibility: 'hidden',
    display: 'block'
});

var optionHeight = $("#myDiv").height();

$("#myDiv").attr("style", previousCss ? previousCss : "");

Cette méthode permet de mesurer discrètement la hauteur d'un élément masqué sans affecter la mise en page ou la visibilité de la page .