Javascript 元素添加到DOM之前的大小

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

var elt=document.createElement（'div'）；
elt.innerHTML=“诸如此类”；
console.log（elt.getBoundingClientRect（））；//这里是：0，0，0，0，0等等。
文件.正文.附录（elt）；
console.log（elt.getBoundingClientRect（））；//此处：8、8、623、20、8、631、28、8

您不能，因为视觉大小取决于：

呈现元素：如果在每次DOM操作之后呈现DOM，这将导致大量内存问题

文档中元素的上下文。如果您没有将元素放入文档中，我们如何计算出元素在文档中的位置？我们如何确定将如何应用于它

---

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

var elt=document.createElement（'div'）；
elt.innerHTML=“诸如此类”；
文件.正文.附录（elt）；
var bounds=elt.getBoundingClientRect（）；
文件.body.removeChild（elt）；
document.getElementById（“边界”）.innerHTML=JSON.stringify（边界）
bounds？
元素的大小还取决于其容器的大小和样式。DOM之外的元素没有容器，因此在不将其添加到DOM的情况下（至少暂时）无法可靠地计算其大小。可能重复no@Tudmotu，我不想找到jQuery解决方案。我用纯香草JS@Fr那就没有解决办法了吗？我想要的大小，如果容器只是一个空的HTML页面没有styling@Basj，没有我知道的解决方案，没有，除了将元素添加到DOM（绝对定位，因此容器的溢出样式不适用，可能在视口之外，以避免视觉伪影）假设元素的容器只是一个没有样式的空HTML页面。那么有解决方案吗？您必须创建一个新文档并将元素附加到该文档中才能查看，但这将比简单地将元素添加到文档中更需要性能，可靠性更低……所有测试（如Modernizer等）都会将html附加到页面中，运行测试，然后将其删除。开销很小，在元素进入DOM之前，它不会占用任何空间。通过实验，您可以将其附加到DOM并使其可见：隐藏；所以GFX不会渲染它。那么你应该可以自由操作它，而不会影响页面谢谢@georg。我已经试过了，但问题是性能。在我的机器上完成整个过程大约需要1毫秒。对于我的一个项目，我需要在成百上千的元素上做这个。。。所以这太慢了。[示例：如果单击的左上角徽标（sitename），我必须在显示大量元素之前计算它们的大小]@Basj:看起来很有趣，但我不明白为什么需要在代码中预先聚集元素大小。也许你可以找一个不需要的解决办法。例如，如果元素的位置取决于其大小，则可以先将其放置在任意位置，然后使其“浮动”到所需的位置。这是更简单的程序，将是相当有吸引力的视觉！我需要预先计算size@georg的唯一原因是，当我想找到包含所有文本元素的边界框时，left=element.style.left（简单），但要计算“right”，我需要元素的宽度，如果你在数十万个元素上这样做，即使在动态造型之后，性能也将变得无法维持。因为DOM元素有如此大的内存占用，我认为您应该探索画布替代方案，或者预先确定元素维度，使其看起来有机，而无需为每个元素重新计算元素维度的巨大开销。