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

Question

在将元素附加到DOM之前,有没有办法获得元素的高度？我知道clientHeight不能正常工作,它总是返回0.还有其他方法可以返回高度,或者元素必须是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)
    }

*注意:这只是我正在处理的函数的简化版本,以便在没有所有不必要的混乱的情况下投影我想要实现的功能.

Answer 1

元素不具备的高度,在任何真正意义上的,直到他们已经被添加到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的空间(所以他们的必须计算尺寸),但用户实际上无法看到.

Answer 2

如果 DOM 节点的高度是/可以是动态的，那么在它存在于 DOM 中之前你可能无法测量它，除非你以某种方式考虑到所有可能的情况（字体大小、填充/边距/边框、实际大小等）。 ）

一个可行的选择是将节点注入到 DOM 中，在视觉上隐藏并测量事物，然后才显示它。

下面是一个工作演示，演示如何通过简单地将元素添加到 DOM 并检查其高度，然后将其删除来测量元素。此方法可能成本较高，因为节点是克隆的，因此添加的样式不会影响之后的节点，并且所有DOM 事件都将从节点中删除。

如果被检查的节点有很多子节点，这可能效率不高，但仍然非常方便。

function getNodeHeight(node) {
    var height, clone = node.cloneNode(true)
    // hide the meassured (cloned) element
    clone.style.cssText = "position:fixed; top:-9999px; opacity:0;"
    // add the clone to the DOM 
    document.body.appendChild(clone)
    // meassure it
    height = clone.clientHeight
    // cleaup 
    clone.parentNode.removeChild(clone)
    return height
}


var newDiv = document.createElement("div");
newDiv.innerHTML = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

<h1>deserunt mollit anim id est laborum.<h1>`


// print the height of "newDiv"
console.log( getNodeHeight(newDiv) )