Získání výšky prvku před přidáním do DOM

Existuje nějaký způsob, jak získat výšku prvku před jeho připojením k DOM? Vím, že clientHeight nefunguje, jak jsem zkoušel, a vždy vrací 0. Existují jiné metody, které mohou vrátit výšku, nebo musí být prvek součástí DOM, aby se výška vypočítala?

Toto je ukázka toho, o co se chystám:

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

*Poznámka:Toto je pouze zjednodušená verze funkce, na které pracuji, abych mohl promítnout to, čeho se snažím dosáhnout, bez toho zbytečného nepořádku.

Odpověď

Prvky nemají výška v jakémkoli skutečném smyslu, dokud nebudou přidáni do DOM, protože jejich styly nelze do té doby vyhodnotit.

Můžete to snadno obejít pomocí visibility: hidden takže prvek lze přidat do DOM (a určit jeho výšku), aniž by došlo k viditelnému blikání.

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

test('p').style.background = '#0f0';
p { position: absolute; top: 0; left: 0; }

(Toto funguje za předpokladu, že používáte top protože prvek je absolutně umístěný nebo pevný. Pokud by tomu tak nebylo, museli byste to udělat dočasně.) Skryté prvky stále zabírají místo v modelu DOM (jejich velikosti je tedy nutné vypočítat), ale uživatel je ve skutečnosti nevidí.