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

【问题标题】：Getting the height of an element before added to the DOM在添加到 DOM 之前获取元素的高度
【发布时间】：2011-05-10 00:49:39
【问题描述】：

有没有办法在将元素附加到 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)
    }

*注意：这只是我正在处理的功能的简化版本，目的是在没有所有不必要的混乱的情况下预测我想要实现的目标。

【问题讨论】：

不同的元素有不同的属性。如果您想要一个好的答案，我们需要知道具体的类型。

标签： javascript dom height append element

【解决方案1】：

元素在任何真正意义上都没有高度，直到它们被添加到 DOM 中，因为直到那时它们的样式才能被评估。

您可以使用visibility: hidden 轻松解决此问题，以便将元素添加到 DOM（并确定其高度）而不会导致可见的闪烁。

function test(a) {
  var a = document.createElement(a);
  a.style.visibility = 'hidden';
  document.body.appendChild(a);
  a.appendChild(document.createTextNode('Hello'));
  a.style.fontStyle = 'italic';
  a.style.top=(window.innerHeight/2 - a.clientHeight/2) + 'px';
  a.style.visibility = '';
  return a;
}

test('p').style.background = '#0f0';

p { position: absolute; top: 0; left: 0; }

（这是在您使用top 的假设下工作的，因为该元素是绝对定位或固定的。如果不是，您需要临时设置它。）隐藏元素仍然占用空间在 DOM 中（因此必须计算它们的大小），但用户实际上无法看到。

【讨论】：

闪烁不是问题，因为它几乎是即时的。编辑：这确实有效！我认为在添加元素后将元素的属性更改为变量不会有任何影响，但显然确实如此，这与我正在寻找的解决方案一样好。
@Jimmy — 我不确定你的意思。 a 添加到 DOM 后仍然可以正常操作。任何可能影响高度的更改都应放在appendChild 和a.top 行之间，但除此之外，一切都应按预期工作。
我意识到我在第一次尝试时在我的函数中犯了一个错误（实际的函数在彼此之间有很多元素）。当我把它放在最后之后添加它时它起作用了，这几乎是我正在寻找的解决方案，即使顺序有点不同。
在安装后使用 getBoundingClientRect 将给出高度和宽度与元素的位置无关？

【解决方案2】：

这是一个工作演示，介绍了如何通过简要将元素添加到 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) )

【讨论】：