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

【问题标题】：JavaScript: Check width of a <div> object before placing itJavaScript：在放置之前检查 <div> 对象的宽度
【发布时间】：2009-11-17 04:38:26
【问题描述】：

考虑：

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

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

【问题讨论】：

标签： javascript jquery

【解决方案1】：

不幸的是，当 div 被渲染到 DOM 中时，它只会有一个宽度值。

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

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

【讨论】：

【解决方案2】：

也许你可以将它附加为不可见，然后检查它的宽度，然后考虑显示或隐藏。

【讨论】：

【解决方案3】：

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

var div = $('#PlotPlace').children("div");

if(div.width() < 60)
    div.css({left:200})

【讨论】：

【解决方案4】：

听起来像是你必须破解的东西。我不相信任何浏览器中的 JavaScript 运行时都有可以在计算布局和显示元素之间挂钩的事件，因此您可以以不可见且不影响高度的方式添加它（不会导致额外的滚动），然后根据此时的宽度显示/隐藏它。它既笨拙又丑陋，但是由于您没有很多事件挂钩，因此它可能是唯一的方法。

【讨论】：

【解决方案5】：

你不能。至少没那么容易。您插入的文本以特定字体编写，必须由浏览器呈现，然后您知道元素的宽度。顺便问一下，你到底想插入什么，有这样的限制？在输出参数中剪切文本不是更简单吗？

【讨论】：