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();

Demonstration

请注意:

• 如果您像我一样一次性完成，则不会显示任何内容。出于所有实际目的，没有在 DOM 中插入任何内容，
• 您也可以使用内存 Canvas ，但它无法处理比简单文本更复杂的任何内容，并且不会考虑您的 span 的 css 设置。

这是使用内存 Canvas 测量某些文本宽度的解决方案:

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;

Demonstration

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