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
Libérer: 2024-12-22 04:24:13
original
968 Les gens l'ont consulté

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 : "");
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal