Obtenir la hauteur d'un élément avant ajouté au DOM

Existe-t-il un moyen d'obtenir la hauteur d'un élément avant de l'ajouter au DOM? Je sais que clientHeight ne fonctionne pas comme je l'ai essayé et il revient toujours 0. Existe-t-il d'autres méthodes qui peuvent renvoyer la hauteur ou l'élément doit-il faire partie du DOM pour que la hauteur soit calculée?

C'est un échantillon de ce que je vais pour:

function test(a) { var a=document.createElement(a) a.style.top=(window.innerHeight/2-a.clientHeight/2)+'px' //fixed position in CSS document.body.appendChild(a) } 

* Remarque: Ce n'est qu'une version simplifiée de la fonction sur laquelle je travaille afin de projeter ce que j'essaye de réaliser sans tout le désordre inutile.

Les éléments n'ont pas de hauteur, en tout sens, jusqu'à ce qu'ils aient été ajoutés au DOM, car leurs styles ne peuvent être évalués qu'avant.

Vous pouvez contourner cela facilement en utilisant la visibility: hidden pour que l'élément puisse être ajouté au DOM (et sa hauteur déterminée) sans provoquer de scintillement visible. ( JsFiddle )

 function test(a) { var a=document.createElement(a); a.style.visibility = "hidden"; document.body.appendChild(a); a.style.top=(window.innerHeight/2-a.clientHeight/2)+'px'; a.style.visibility = ""; } 

(Cela fonctionne en supposant que vous utilisez le top parce que l'élément est absolument positionné ou réparé. Si ce n'était pas le cas, vous devriez le faire si temporairement.) Les éléments cachés occupent encore de l'espace dans les DOM (alors Leur taille doit être calculée), mais ne peut pas être vu par l'utilisateur.