内联元素的宽度

Width of an inline element

本文关键字：元素      更新时间：2023-09-26

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

添加

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

如何不添加到文档？

对不起我的英语）

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

如果你不想让它出现在屏幕上，你可以把它添加到一些不可见的元素中。

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

您需要将其附加，但也可以将其放置在可见区域之外（具有position:absolute和负左/上属性），并在获得宽度

后将其移除

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

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

相关文章：