Question

在将元素附加到DOM之前，有没有办法获得元素的高度？我知道clientHeight不能正常工作，它总是返回0.还有其他方法可以返回高度，或者元素必须是DOM的一部分才能计算高度？ / p>

这是我想要的样本：

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事件都将从其中删除。

如果检查的节点有很多子节点，这可能没有效率，但是stil可能非常方便。

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

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

2 个答案: