Height réel d'un paragraphe

Bonjour tout le monde,

je suis en train de réaliser un petit script mais je sèche sur un point particulier.

J'ai, sur ma page, un paragraphe de style "display=none". Néanmoins, j'aimerai savoir quelle est la hauteur qu'il prendrait si il serait affiché normalement. Je pense qu'il doit bien exister une propriété CSS pour cela, mais je ne connais pas laquelle.

Pourriez-vous m'aider ?

Merci d'avance
COrdialement

visibility:hidden ?

Bonjour,
En utilisant javascript, avec jQuery, les dernières versions incluent l'ancien plugin dimension.

jQuery("idparagraphe").height();

et s'il possède de paddings, border ... jQuery("idparagraphe").outerHeight();

Bonjour tout le monde,

tout d'abord merci pour votre aide.

Benjamin D.C. : visibility n'est pas applicable ici : en effet, le bloc ne s'affichera pas, mais la place qu'il occupera sera conservé

loicbcn : justement j'aimerai passer outre jquery

Merci pour votre réponse
Finality

WebStudent a écrit :
Je pense qu'il doit bien exister une propriété CSS pour cela, mais je ne connais pas laquelle.

Hello et bienvenue,

Les CSS ne permettent pas de "deviner" quelles sont les dimensions des éléments (à moins de leur appliquer les propriétés width, height, etc.).

Ce genre de comportement est effectivement du ressort de JavaScript.

WebStudent a écrit :
Benjamin D.C. : visibility n'est pas applicable ici : en effet, le bloc ne s'affichera pas, mais la place qu'il occupera sera conservé

visibility:hidden + position:absolute. CQFD.

Raphael a écrit :
Ce genre de comportement est effectivement du ressort de JavaScript.

En fait, en premier lieu c'est du ressort du moteur de rendu du navigateur. Il faut que l'élément et son contenu soient rendus pour savoir quel espace il occupe. JavaScript ne permettra pas de récupérer (sauf erreur de ma part) la hauteur d'un élément en display:none.

Sans compter que la taille des polices étant modifiable, la hauteur du contenant est fluctuante. Et sans compter qu'effectivement les UA gérant différemment les encombrements de textes, le même texte à la même taille n'occupera pas nécessairement le même espace. Etc.

Florent V. a écrit :

En fait, en premier lieu c'est du ressort du moteur de rendu du navigateur. Il faut que l'élément et son contenu soient rendus pour savoir quel espace il occupe. JavaScript ne permettra pas de récupérer (sauf erreur de ma part) la hauteur d'un élément en display:none.

C'est une erreur de ta part ...

loicbcn a écrit :
C'est une erreur de ta part ...

Ok, je corrige: JavaScript ne permet pas, pour un élément en display:none, de récupérer la hauteur que cet élément ferait s'il était dans un autre mode de rendu (notamment en display:block).

Pour un élément en display:none, element.clientHeight et element.offsetHeight me retournent tous les deux la valeur zéro. Ce qui est à la fois juste et complètement inutile au vu du besoin exprimé.

Si tu as des précisions, Loic, n'hésite pas.

Non, je dis ça parce que après avoir testé : alert(jQuery("idparagraphe").height()); sur un paragraphe en 'display:none' contenant du texte, la réponse de javascript est supérieure à zéro. (72 dans mon cas).

Voilà.

loicbcn a écrit :
Non, je dis ça parce que après avoir testé : alert(jQuery("idparagraphe").height()); sur un paragraphe en 'display:none' contenant du texte, la réponse de javascript est supérieure à zéro. (72 dans mon cas).

Bien vu. J'ai parcouru le code source de jQuery (parce que pas trouvé de documentation à ce sujet), et je ne comprends pas tout, mais il me semble que jQuery «triche» ici: si la hauteur de l'élément est de zéro (ce qui pourrait indiquer qu'il est en display:none), jQuery le passe en display:block + position:absolute + visibiliy:hidden, et récupère la hauteur.

Je n'en suis pas tout à fait certain, mais mes tests semblent le confirmer. Cela signifie notamment qu'il n'est pas possible avec jQuery, en se reposant uniquement sur la fonction jQuery.height(), de récupérer la hauteur qu'occuperait un élément en display:none si on le basculait en display:inline, ou tout autre mode de rendu autre que display:block. J'ai pu le confirmer par quelques tests.

(Au final, il semblerait que mon affirmation ci-dessus tient toujours.)
Modifié par Florent V. (21 May 2009 - 22:44)

Passer un paragraphe en inline, par vice à la rigueur, mais sinon ...

En tout cas merci, je n'étais pas allé jusqu'à regarder dans le code comment faisait jQuery.

Byebaille.

loicbcn a écrit :
Passer un paragraphe en inline, par vice à la rigueur, mais sinon ...

Je le fais régulièrement dans des intégrations pro. Ceci dit, quand on cherche à obtenir la hauteur que prendrait un élément dans son contexte, il s'agira probablement d'un bloc.