在添加到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之前获取元素的高度

回答

相关问题