javascript - 如何使用 jquery 以编程方式从跨度中获取像素宽度

Question

我正在尝试做类似的事情：

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

但它返回的宽度是 0。（我试图这样做的原因是为了获取给定文本的像素宽度。）

我如何以编程方式获得这个宽度？

谢谢

Answer 1

您必须对其进行渲染。

你可以这样做：

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

示范

注意 ：

• 如果您像我一样一次性执行此操作，则不会显示任何内容。出于所有实际目的，没有在 DOM 中插入任何内容，
• 您也可以使用内存画布，但它不会处理比简单文本更复杂的东西，也不会考虑跨度的 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;

示范

在一般情况下，我会使用第一个，但这可能取决于您为什么要测量文本。