在Javascript / jQuery中确定字符串的像素长度？

Question

在Javascript / jQuery中确定字符串的像素长度？

有没有办法在jQuery / JavaScript中确定字符串的像素长度？

Answer 1

在span中包装文本并使用jquery width（）

Answer 2

用于HTML Canvases的上下文具有用于检查字体大小的内置方法。此方法返回一个TextMetrics对象，该对象具有包含文本宽度的width属性。function getWidthOfText(txt, fontname, fontsize){     if(getWidthOfText.c === undefined){         getWidthOfText.c=document.createElement('canvas');         getWidthOfText.ctx=getWidthOfText.c.getContext('2d');     }     getWidthOfText.ctx.font = fontsize + ' ' + fontname;     return getWidthOfText.ctx.measureText(txt).width;}或者，正如其他一些用户所建议的那样，您可以将其包装在一个span元素中：function getWidthOfText(txt, fontname, fontsize){     if(getWidthOfText.e === undefined){         getWidthOfText.e = document.createElement('span');         getWidthOfText.e.style.display = "none";         document.body.appendChild(getWidthOfText.e);     }     getWidthOfText.e.style.fontSize = fontsize;     getWidthOfText.e.style.fontFamily = fontname;     getWidthOfText.e.innerText = txt;     return getWidthOfText.e.offsetWidth;}测试：第一个解决方案（画布） - 测试，工作（以像素为单位返回）第二个解决方案（DOM） - 测试，工作（以像素为单位返回）请注意，由于实现差异，两者可能会返回略有不同的值。性能测试：平均超过100次迭代的26788次调用。测试于2014年末mac mini，1.4 GHz i5Safari，版本10.1.1（12603.2.4）：第一种解决方案：26788次调用为33.92毫秒第二种解决方案：26788次调用为67.94毫秒谷歌浏览器，版本60.0.3112.90：第一种解决方案：26788次调用为99.1963毫秒第二种解决方案：26788次调用307.4605毫秒