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

J'ai un DIV défini avec une hauteur fixe:sélection de la hauteur réelle d'un DIV dans jQuery

.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?

Source

2010-10-08 patrick

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

Source

2010-10-08 11:51:01

div.height ('auto'). Height() semble bien fonctionner! merci pour cette solution. Je pense que c'est un peu plus élégant que le div [0] .scrollheight. Le rend plus lisible – patrick

essayer scrollHeight comme ceci:

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

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

Source

2010-10-08 11:50:18 TheVillageIdiot

Cela semble fonctionner: http://jsbin.com/ecoda/5 –

ok, cela fonctionne en effet! ce tableau est-il documenté quelque part? Je n'aurais jamais deviné ça! ;-) – patrick

@patrick: * "est ce document de tableau quelque part?" * Oui, voici le lien: http://docs.jquery.com/Types#jQuery Une instance de jQuery est (entre autres) un pseudo-tableau de les éléments DOM qui sont dans l'ensemble actuel. Donc 'var jqobj = $ ('# foo');' vous donne une instance jQuery pour l'élément avec l'ID "foo" (le cas échéant). Vous pouvez accéder à l'élément brut via 'jqobj [0]' et le nombre d'éléments correspondants via 'jqobj.length'. ** Contrairement à ** un tableau réel, vous devez traiter la propriété 'length' et les entrées de l'élément en lecture seule. (suite) –

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

    }); 
});

Source

2014-10-03 16:07:56 Brandy

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

Répondre

Questions connexes