猿问
下载APP

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

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

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



潇湘沐
浏览 53回答 3
3回答

慕运维8079593

在span中包装文本并使用jquery width()

慕标琳琳

用于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毫秒

Cats萌萌

我不相信你只能做一个字符串,但如果你把字符串放在一个<span>正确的属性(大小,字体重量等);&nbsp;然后你应该能够使用jQuery来获得跨度的宽度。<span&nbsp;id='string_span'&nbsp;style='font-weight:&nbsp;bold;&nbsp;font-size:&nbsp;12'>Here&nbsp;is&nbsp;my&nbsp;string</span><script> &nbsp;&nbsp;$('#string_span').width();</script>
打开App,查看更多内容
随时随地看视频慕课网APP
我要回答