在添加到DOM之前獲取元素的高度

在將元素的高度附加到DOM之前是否有任何方法獲取元素的高度？我知道clientHeight並沒有像我嘗試過的那樣工作，並且它總是返回0.是否還有其他可能返回高度的方法，或者元素是否必須是DOM的一部分才能計算高度？在添加到DOM之前獲取元素的高度

這就是我要去爲我的一個樣本：

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

*注：這只是我爲了工作到什麼項目我想要的功能的簡化版本實現沒有所有不必要的混亂。

來源

2011-05-10 Ruffy

不同的元素有不同的屬性。如果你想得到一個好的答案，我們需要知道具體的類型。 – Kayla 2011-05-10 00:54:33

元素不具有具有的高度，在任何真正意義上，直到它們被添加到DOM，因爲直到那時它們的樣式才能被評估。

您可以使用visibility: hidden輕鬆解決此問題，以便可以將元素添加到DOM（並確定其高度），而不會導致可見的閃爍。（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 = ""; 
}

（這是工作在您使用top，因爲該元素是絕對定位或固定的假設。如果不是這樣，你需要使它所以暫時的。）隱藏元素仍佔用DOM中的空間（因此它們的大小必須被計算），但實際上不能被用戶看到。

來源

2011-05-10 00:53:52

閃爍不是問題，因爲它幾乎是瞬間的。編輯：這確實有用！我認爲將元素的屬性作爲變量添加後將不會產生任何影響，但很明顯，確實如我所期望的那樣好。 – Ruffy 2011-05-10 00:58:03

@Jimmy - 我不確定你的意思。添加到DOM後，仍然可以正常操作'a'。任何可能影響高度的變化都應該放在'appendChild'和'a.top'之間，但除此之外，一切都應該按照預期工作。 – 2011-05-10 01:00:46

我意識到我第一次嘗試它的時候在函數中犯了一個錯誤（實際的函數在eachother中有很多元素）。當它被放置在最後時，它就起作用了，這幾乎是我尋找的解決方案，即使是按照不同的順序。 – Ruffy 2011-05-10 01:02:46

在添加到DOM之前獲取元素的高度

回答

相關問題