Bonjour les ZérOs,

Je réalise un petit script qui fait varier la hauteur de mes éléments pour les afficher ou les masquer.

Pour que ça fonctionne je dois donc détecter la hauteur de mes éléments, la stocker dans un array et la passer à 0 afin d'initialiser mon menu. Le problème c'est que mes élément son eux-même contenus dans un autre accordéon : ils ne sont donc jamais rendus par le navigateur. Du coup, la hauteur retournée par offsetHeight est toujours égale à 0.

Je me suis dit que je pourrais me baser sur le line-height : essayer de déduire le nombre de lignes, à partir du nombre de caractères et de la largeur de mes éléments, pour évaluer la hauteur de l'élément. Sauf que la largeur est flexible, que tous les caractères ne chassent pas pareil, qu'il faut prendre en compte les sauts de ligne, que le site est disponible en trois langues et que je ne peux pas être sûr que la police utilisée par l'utilisateur sera la bonne.

Bien qu'il y ait une solution à tous ces problèmes, ça commence à devenir très lourd juste pour récupérer une hauteur, d'autant que mon accordéon comprend des dizaines d'éléments.

Donc je cherche une solution plus simple. Est-ce que quelqu'un a une petite idée ?
Merci

Ne te suffirait-il pas de cloner l'élément et de l'insérer brièvement ailleurs, pour calculer sa hauteur, par exemple ?

<button onclick="afficher('cache');">Afficher</button>
<div id="cache" style="display:none;border:1px solid black;">Ce div est caché dès le départ.
<div id="souscache" style="border:1px solid black;">Ce div est inclus dans le div caché</div>
</div>
<div id="height"></div>

<script type="text/javascript">
function afficher(id) {
  document.getElementById(id).style.display = '';
}

function getHeight(el) {
  el = el.cloneNode(true);
  el.style.visibility = 'hidden';
  document.body.appendChild(el);
  var h = el.offsetHeight;
  document.body.removeChild(el);
  return h;
}

window.onload = function() {
  document.getElementById('height').innerHTML = "Le div dans le div caché fait "+getHeight(document.getElementById('souscache'))+" px de hauteur.";
};
</script>

ça pourrait marcher

Je n'aurais pas pensé à visibility:hidden;
ça + un position: absolute; et ça ne devrait pas se voir.

J'espère que c'est pas trop lent à exécuter.
En tout cas merci, je teste ça et je confirme la résolution du problème.

edit : ça marche impec ! J'ai juste un problème avec certains éléments qui sont trop courts, mais c'est une autre histoire.

Oui, exact, pour éviter une éventuelle brève apparition, ou interférence quelconque, tu peux le mettre en position absolue avec un top et left grandement négatifs (genre -10000px).