如何使用jQuery编程获取一个span元素的像素宽度

Question

我想做的事情是：

 $('<span>random text in here</span>').width()

但是它返回的宽度为0。（我尝试做这个事情是为了获取给定文本的像素宽度。）

如何通过编程方式获取宽度呢？

谢谢。

- Shai UI

---

宽度为0，因为该span没有大小。它尚未添加到DOM中。它在DOM中的位置将改变其字体大小，因此无法在不以某种方式呈现它的情况下进行计算。 - zzzzBov

Answer 1

你需要将其渲染出来。

你可以这样做：

var s = $('<span>random text in here</span>');
s.appendTo(document.body);
var w = s.width();
s.remove();

演示

请注意：

• 如果您像我一样一次性执行此操作，则不会显示任何内容。就实际效果而言，未插入到DOM中的任何内容都不会显示。
• 您也可以使用内存画布，但它只能处理简单文本，不能考虑您的span css设置以外的复杂内容。

这里是使用内存画布测量一些文本宽度的解决方案：

var canvas = document.createElement('canvas');
var c = canvas.getContext('2d');
// set here c.font to adjust it to your need
var w = c.measureText('random text in here').width;

演示

通常情况下，我会使用第一个，但这可能取决于您想要测量文本的原因。

- Denys Séguret

---

我更喜欢不向DOM插入任何内容。 - Shai UI

如果立即移除，它不会真正地显示。用户看不到它。 - Denys Séguret

@foreyez，您绝对需要以某种方式将其插入到DOM中。这并不意味着它必须可见。 - zzzzBov