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