内联元素的宽度

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的一部分，则无法获得元素的宽度。

你需要追加它，但你也可以将它放在可见区域之外（位置：绝对和负左/顶属性）并在获得宽度后将其移除

Answer 3

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

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