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 属性的对象。这应该是跨浏览器。

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

更新：要确保此功能适用于没有宽度/高度属性的旧浏览器，请计算它从左/上减去右/下。

Answer 2

视口可以因滚动条而改变其大小。滚动条出现后，文档将无法再使用其宽度。在通过将overflow: scroll或overflow-y:scroll添加到<html>元素来衡量尺寸之前，强制滚动条存在。

默认情况下，块级元素的大小是其容器宽度减去边距和填充（即使它是position ed absolute ly），这最终是wiewport宽度，除非您设置沿途的某个固定宽度。

Answer 3

使用jQuery，你应该能够做到这一点：

var width = $("div-selector").width();

Answer 4

这很容易吗？

在浏览器中打开页面，然后按f12。使用firefox，顶部有一个“inspect元素”按钮，底部有一个chrome。单击它并将鼠标悬停在其上。这应该给你px的高度和宽度。从来没有错过我。

如果它仍未显示，请单击它，您可以在控制台的css面板中看到它。