在将元素添加到DOM之前的元素大小

Question

如果我们在将元素添加到DOM之前计算元素的大小，结果是错误的，请参见第三行代码：

var elt = document.createElement('div');
elt.innerHTML = "Blah";
console.log(elt.getBoundingClientRect());  // here : 0, 0, 0, 0, 0, etc.
document.body.appendChild(elt);
console.log(elt.getBoundingClientRect());  // here : 8, 8, 623, 20, 8, 631, 28, 8

在将添加到DOM之前，如何计算元素的大小？

Answer 1

添加元素，获取其边界并删除。它不会出现在屏幕上。

＆＃13;

＆＃13;

var elt = document.createElement('div');
elt.innerHTML = "Blah";
document.body.appendChild(elt);
var bounds = elt.getBoundingClientRect();  
document.body.removeChild(elt);
document.getElementById("bounds").innerHTML = JSON.stringify(bounds);

＆＃13;

<div id="bounds">bounds?</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你不能，因为视觉尺寸取决于：

1. 渲染元素：如果DOM在每次DOM操作后呈现，这将导致大量内存问题。
2. 文档中元素的上下文。如果您没有将元素放在文档中，我们如何计算元素在文档中的位置？我们如何确定如何应用哪种样式？