在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 i5

Safari，版本10.1.1（12603.2.4）：

• 第一种解决方案：26788次调用为33.92毫秒

• 第二种解决方案：26788次调用为67.94毫秒

谷歌浏览器，版本60.0.3112.90：

• 第一种解决方案：26788次调用为99.1963毫秒

• 第二种解决方案：26788次调用307.4605毫秒