jQuery: Obtenir la hauteur de l'élément masqué en jQuery

Question

J'ai besoin d'obtenir la hauteur d'un élément à l'intérieur d'un div qui est caché. Droit maintenant je le div, obtenir la hauteur, et de cacher le div parent. Cela semble un peu ridicule. Est-il un meilleur moyen?

J'utilise jQuery 1.4.2:

$select.show();
optionHeight = $firstOption.height(); //we can only get height if its visible
$select.hide();

Answer 1

Vous pourriez faire quelque chose comme cela, un peu hacky cependant, oublier position si elle est déjà en absolu:

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

Answer 2

J'ai rencontré le même problème avec l'obtention élément masqué largeur, j'ai donc écrit ce plugin appel jQuery Réel pour le fixer. Au lieu d'utiliser

$('#some-element').height();

utilisation

$('#some-element').actual('height');

va vous donner la bonne valeur pour l'élément masqué ou élément a un parent masqué.

Documentation complète, veuillez consulter ici. Il y a aussi une démo inclure dans la page.

Espérons que cela aide :)

Answer 3

Vous êtes confuising deux styles CSS, le style d'affichage et la visibilité de style.

Si l'élément est masqué par la définition de la visibilité de style css, alors vous devriez être en mesure d'obtenir la hauteur de la indépendamment de si oui ou non l'élément est visible ou pas, que l'élément encore prend de l'espace sur la page.

Si l'élément est masqué par modification de l'affichage de style css à "none", puis l'élément ne prend pas de place sur la page, et vous devrez lui donner un style d'affichage qui sera la cause de l'élément à afficher dans l'espace, à quel point, vous pouvez obtenir la hauteur.

Answer 4

En fait, j'ai eu recours à un peu de ruse pour traiter cela à la fois. J'ai développé un jQuery barre de défilement widget où j'ai rencontré le problème que je ne sais pas à l'avance si le défilement de contenu est une partie d'un morceau caché de balisage ou pas. Voici ce que j'ai fait:

// try to grab the height of the elem
if (this.element.height() > 0) {
    var scroller_height = this.element.height();
    var scroller_width = this.element.width();

// if height is zero, then we're dealing with a hidden element
} else {
    var copied_elem = this.element.clone()
                      .attr("id", false)
                      .css({visibility:"hidden", display:"block", 
                               position:"absolute"});
    $("body").append(copied_elem);
    var scroller_height = copied_elem.height();
    var scroller_width = copied_elem.width();
    copied_elem.remove();
}

Cela fonctionne pour la plupart, mais il y a un problème évident qui peut potentiellement venir. Si le contenu vous êtes le clonage est en forme avec CSS qui inclut des références à des parents de balisage dans leurs règles, le contenu cloné ne contiennent pas le style approprié, et auront probablement des dimensions légèrement différentes. Pour contourner ce problème, vous pouvez vous assurer que le balisage vous êtes le clonage a des règles CSS appliquées à ce que ne comprennent pas les références à la mère de balisage.

Aussi, ce n'est pas venu pour moi avec mon curseur widget, mais à la hauteur de l'élément cloné, vous aurez besoin de définir la largeur de la même largeur de l'élément parent. Dans mon cas, un CSS largeur était toujours appliquée à l'élément, donc je n'ai pas à vous inquiéter à ce sujet, cependant, si l'élément n'a pas une largeur appliqué, vous devrez peut-être faire une sorte de récursive de la traversée de l'élément du DOM de l'ascendance pour trouver le parent de l'élément de largeur.

Answer 5

Bâtir sur du Pseudo réponse:

$("#myDiv").css({'position':'absolute','visibility':'hidden', 'display':'block'});
optionHeight = $("#myDiv").height();
$("#myDiv").css({'position':'static','visibility':'visible', 'display':'none'});

Je l'ai trouvé de mieux pour ce faire:

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

Réglage des attributs CSS va insérer inline, qui remplacera tous les autres attributs que vous avez dans votre fichier CSS. En supprimant l'attribut style sur l'élément HTML, tout revient à la normale et toujours caché, car il était caché dans la première place.