javascript - 如何计算跨度中每个字符的宽度和高度

Question

计算跨度中每个字符的宽度和高度的最佳方法是什么。

说，html看起来像：

 <span style="font-size:12px">Test 100<span>

因此，一种方法是为每个具有跨度样式的字符创建一个虚拟跨度，并将其附加到 dom 并获取它的高度和宽度。

例如，使用查询：

 var x = $('<span style="font-size:12px">' + 'T' + '</span'>);
 $('body').append(x); 
 var h = x.height(),  w= x.width();
 x.remove();

但这是低效的。还有其他方法吗？

Answer 1

您无法真正获得字符的大小，因为它占用的空间量取决于它旁边的字符。

例如，字符AandV彼此相邻是紧缩的，因此它们比一个Anext 到 anA或 a Vnext 到 a更靠近V。交错放置相同数量的字符比将它们放在相同字符旁边占用更少的空间：

AVAVAVAVAVAVAVAVAVAVAVAVAVAVAV
AAAAAAAAAAAAAAAAVVVVVVVVVVVVVVVV

Answer 2

不要每次都创建一个 span，而是尝试更改 span 的 innerHTML 并获取它的宽度。这会更快，并且不会触发大量验证。

试一试，它表现得更快吗？