Question

考虑：

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

只有在结果文本的宽度小于60px时才需要执行该行。如何在放置物体前检查宽度？

Answer 1

不幸的是，div只有在渲染到DOM中时才会有宽度值。

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

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

Answer 2

也许你可以将它隐藏起来，然后检查它的宽度，然后考虑显示或隐藏。

Answer 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})

Answer 4

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

Answer 5

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

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

5 个答案: