sélection de la hauteur réelle d'un DIV dans jQuery

Question

J'ai un DIV défini avec une hauteur fixe:

.w { 
    height: 100px; 
    overflow: hidden; 
} 

si je mets dans ce texte, il cachera tout ce qui va au-delà du 100px. J'ai un bouton qui montre tout le texte, il le fait essentiellement:

$('.w').height('auto'); 

cela va rendre tout le texte visible, mais je voudrais animer ce. Et cela ne fonctionnera pas avec height = 'auto', il doit avoir une hauteur spécifique.

La question: comment puis-je obtenir la hauteur que le DIV devrait être pour pouvoir afficher tout le texte dedans?

Answer 1

Vous pouvez définir la hauteur sur 'auto', puis la mesurer, puis la rétablir et démarrer l'effet.

Quelque chose comme ça (live example):

jQuery(function($) { 

    // Div starts with "style='height: 10px; overflow: hidden" 
    var div = $('#thediv'); 

    // On click, animate it to its full natural height 
    div.click(function() { 
    var oldHeight, newHeight; 

    // Measure before and after 
    oldHeight = div.height(); 
    newHeight = div.height('auto').height(); 

    // Put back the short height (you could grab this first 
    div.height(oldHeight); 
    div.animate({height: newHeight + "px"}, "slow"); 
    }); 
});​ 

Answer 2

essayer scrollHeight comme ceci:

$('#ID_OF_DIV')[0].scrollHeight 

Remarque [0], car il est la propriété d'éléments DOM.

Answer 3

T.J. La réponse de Crowder n'a pas fonctionné pour moi parce que "oldHeight" était une valeur de pixel calculée, différente de la valeur rem que j'avais spécifiée dans ma feuille de style. En outre, le style en ligne a remplacé une hauteur différente que j'avais pour une autre requête de média. Donc, au lieu de sauvegarder "oldHeight" et de le remettre plus tard, j'ai juste effacé le style inline de jQuery en plaçant css 'height' dans une chaîne vide.

jQuery(function($) { 

    // Div starts with "style='height: 10px; overflow: hidden" 
    var div = $('#thediv'); 

    // On click, animate it to its full natural height 
    div.click(function() { 
     // Measure after 
     var newHeight = div.height('auto').height(); 

     // Remove inline styles 
     div.css('height', ''); 
     div.animate({height: newHeight + "px"}, "slow"); 

    }); 
});​