Maison >interface Web >tutoriel CSS >Comment puis-je obtenir efficacement la hauteur d'un élément caché à l'aide de jQuery ?

Comment puis-je obtenir efficacement la hauteur d'un élément caché à l'aide de jQuery ?

Mary-Kate Olsen
Mary-Kate Olsenoriginal
2024-12-22 04:24:13962parcourir

How Can I Efficiently Get the Height of a Hidden Element Using jQuery?

Obtenir la hauteur des éléments cachés avec jQuery

Déterminer la hauteur d'un élément caché dans un div parent masqué peut être difficile. Il n'est pas efficace de révéler temporairement l'élément juste pour obtenir sa hauteur, puis de le masquer à nouveau. Voici une solution plus optimale :

Solution :

Vous pouvez utiliser l'extrait de code suivant :

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 : "");

Explication :

  1. Enregistrer les styles CSS actuels du div dans le CSS précédent variable.
  2. Ajustez le CSS du div en définissant sa position sur absolue (facultatif si elle est déjà absolue), sa visibilité sur masqué et son affichage sur bloc.
  3. Obtenez la hauteur du div désormais visible et stockez-le dans la variable optionHeight.
  4. Restaurez les styles CSS précédents du div ou supprimez les styles en ligne si previousCss est vide.

Cette approche évite d'avoir à afficher et masquer le div parent, ce qui permet d'obtenir un moyen plus efficace d'obtenir la hauteur de l'élément caché.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn