Comment obtenir la hauteur des éléments cachés dans jQuery ?

Détermination de la hauteur des éléments cachés dans jQuery

Lorsqu'il s'agit d'éléments cachés, il peut être difficile de déterminer leurs dimensions. Ce problème survient lorsqu'il faut récupérer la hauteur d'un élément situé dans un parent masqué. Une approche courante consiste à afficher temporairement l'élément parent, à extraire la hauteur, puis à la masquer à nouveau.

Cependant, cette méthode peut sembler inefficace. Existe-t-il une solution plus optimale ?

Pour les utilisateurs de jQuery, une approche plus sophistiquée peut être utilisée pour récupérer les hauteurs des éléments même lorsqu'ils sont masqués. En tirant parti du positionnement « absolu » et de la manipulation de « visibilité » de jQuery, nous pouvons temporairement rendre les éléments cachés visibles à des fins de mesure :

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

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

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

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

Cette technique consiste à définir l'élément avec le parent caché pour avoir une position absolue, ce qui le supprime du flux de documents normal et une visibilité cachée, le rendant invisible pour l'utilisateur. Par la suite, la propriété « display » est définie sur « block », ce qui permet à l'élément d'occuper de l'espace, en fonction de la mesure de la hauteur.

Après avoir récupéré la hauteur, le style CSS d'origine est restauré pour conserver l'état antérieur de l'élément. . Cette approche offre un moyen plus concis et efficace de déterminer la hauteur des éléments cachés dans jQuery, en évitant les changements d'affichage temporaires et le scintillement inutile.

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!