Comment obtenir la hauteur d’un élément caché avec jQuery ?

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

Lorsque vous travaillez avec des éléments cachés, il peut être nécessaire de récupérer leurs dimensions à diverses fins. Cependant, les méthodes conventionnelles d'obtention de 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 :

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 de documents principal)
2. Mesurer Hauteur : Récupérez la hauteur de l'élément à l'aide de la méthode .height() de jQuery.
3. Restaurer les 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 directement la propriété style.

Exemple de code

<code class="javascript">var previousCss = $("#myDiv").attr("style");

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

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

$("#myDiv").attr("style", previousCss ? previousCss : "");</code>

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

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!