在将元素附加到DOM之前,有什么方法可以获取它的高度?我知道clientHeight不能正常工作,并且总是返回0。是否有其他方法可以返回height,或者元素必须是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)
}
*注意:这只是我正在使用的功能的简化版本,目的是在没有所有不必要的困惑的情况下投影出我要实现的功能。
最佳答案
元素在任何实际意义上都没有高度,直到将它们添加到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中的空间(因此必须计算其大小),但实际上无法被用户看到。