javascript - 动态插入的包含文本的 div 的宽度

Question

我有一个脚本可以在 dom 中动态插入一个包含文本的 div。文本内容事先不得而知。

我需要知道这个 div 的宽度，但似乎 document.defaultView.getComputedStyle(node, "").getPropertyValue("width") 的返回值还是 node. offsetWidth 不可信任。

我是用setInterval记录的，值会随着时间变化。例如，在我的示例中，它以 929px 开头，然后更改为 908px。

这个 div 位于绝对位置，它有空白 nowrap，所以我不认为它被其他 dom 元素“插入”或者它在插入后以某种方式改变。

是否有一种优雅的方法来检索宽度，或者我是否必须在返回值稳定后使用丑陋的 setTimeout 来检索它？

Answer 1

尝试:

yourDOMElement.getClientBoundingRect()

这将返回一个具有 top、left、right、bottom、height 和 width 属性的对象。这应该是跨浏览器的。

注意:如果您要使用返回的位置属性(顶部、左侧、右侧、底部、高度)，请在必要时考虑滚动偏移。

更新:为确保这适用于没有 width/height 属性的旧版浏览器，计算方法是从左/上减去右/下。