1

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

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

我使用 setInterval 来记录它，并且值会随着时间而变化。例如，在我的例子中，它从 929px 开始，然后变为 908px。

这个 div 处于绝对位置，它有空格 nowrap，所以我认为它不会被其他 dom 元素“推送”，或者一旦插入它就会以某种方式发生变化。

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

4

4 回答 4

1

由于滚动条，视口可以更改其大小。一旦滚动条出现，文档就不能再使用它的宽度。overflow: scroll在通过添加或元素overflow-y:scroll来测量大小之前强制滚动条存在。<html>

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

于 2012-10-18T15:34:02.070 回答
1

尝试：

yourDOMElement.getClientBoundingRect()

这将返回一个具有顶部、左侧、右侧、底部、高度和宽度属性的对象。这应该是跨浏览器的。

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

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

于 2012-10-18T15:29:42.600 回答
0

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

var width = $("div-selector").width();
于 2012-10-18T15:29:14.293 回答
-2

这很容易吗？

在浏览器中打开页面并按 f12。使用 Firefox，顶部有一个“检查元素”按钮，而在 chrome 中，它在底部。单击它并将鼠标悬停在它上面。这应该为您提供以 px 为单位的高度和宽度。对我来说从来没有错。

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

于 2012-10-18T15:26:19.777 回答