javascript - 内联元素的宽度

Question

如何在不添加到文档的情况下知道内联元素的宽度？

随着添加

var span = document.createElement('span');
span.innerHTML = 'Hello, world!';
span.offsetWidth; //0
document.body.appendChild(span);
span.offsetWidth; //70

不添加到文档怎么办？

对不起我的英语不好）

Answer 1

元素的宽度显然取决于所使用的样式（例如字体大小），因此在不知道元素在 DOM 中的位置的情况下，不可能计算元素的宽度。

如果您不希望它显示在屏幕上，您可以将它添加到一些不可见的元素中。

Answer 2

如果元素本身不是 DOM 的一部分，则无法获取元素的宽度。

您需要附加它，但您也可以将其放置在可见区域之外（使用 position: absolute 和负左/顶属性）并在获得宽度后将其删除

Answer 3

在添加元素之前，无法确定它的宽度，因为它取决于样式上下文。

jQuery 的width()方法有一个用于display: none元素的技巧，我不知道它是否适用于尚未添加到 DOM 的元素（它通过临时显示元素，获取宽度，然后再次隐藏它来工作）。