Nat*_*ium 57
在span中包装文本并使用jquery width()
Éle*_*tra 46
用于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;
}
测试:
请注意,由于实现差异,两者可能会返回略有不同的值.
性能测试:平均超过100次迭代的26788次调用.测试于2014年末mac mini,1.4 GHz i5
Safari,版本10.1.1(12603.2.4):
谷歌浏览器,版本60.0.3112.90:
Top*_*gio 11
我不相信你只能做一个字符串,但如果你把字符串放在一个<span>正确的属性(大小,字体重量等); 然后你应该能够使用jQuery来获得跨度的宽度.
<span id='string_span' style='font-weight: bold; font-size: 12'>Here is my string</span>
<script>
$('#string_span').width();
</script>
将它放在一个绝对定位的div中,然后使用clientWidth来获取标签的显示宽度.您甚至可以将可见性设置为"隐藏"以隐藏div:
<div id="text" style="position:absolute;visibility:hidden" >This is some text</div>
<input type="button" onclick="getWidth()" value="Go" />
<script type="text/javascript" >
function getWidth() {
var width = document.getElementById("text").clientWidth;
alert(" Width :"+ width);
}
</script>
基于vSync的答案，纯javascript方法可快速处理大量对象。这是小提琴：https : //jsfiddle.net/xeyq2d5r/8/
[1]: https://jsfiddle.net/xeyq2d5r/8/ "JSFiddle"
我收到了针对建议的第三种方法的良好测试，该方法使用本机javascript vs HTML Canvas
谷歌在选项1和3、2被炸方面相当有竞争力。
FireFox 48：
方法1花费了938.895毫秒。
方法2花费了1536.355毫秒。
方法3花费了135.91499999999996毫秒。
Edge 11方法1花费了4895.262839793865毫秒。
方法2花费了6746.622271896686毫秒。
方法3花费了1020.0315412885484毫秒。
Google Chrome：52
方法1花费了336.4399999999998毫秒。
方法2花费了2271.71毫秒。
方法3花费了333.30499999999984毫秒。