JavaScript:在放置之前检查 <div> 对象的宽度

Question

考虑:

$("#PlotPlace").append('<div style="position:absolute;left:200px;top:40px;font-size:smaller">Hello world!</div>');

只有当结果文本的宽度小于 60 像素时，我才需要执行该行。如何在放置对象之前检查宽度？

Answer 1

不幸的是，div 在渲染到 DOM 后只有一个宽度值。

我会将该内容附加到文档的不显眼区域，甚至可能绝对定位以便不会发生流中断，并确保将其设置为“visibility:hidden”。这样它将被插入到 DOM 中并被渲染，但对查看者是不可见的。

然后您可以检查其宽度，将其移动到位并在该点将其设置为“visibility:visible”。否则，您可以将其从文档中删除。