在Javascript/jQuery中确定字符串的像素长度？
在Javascript/jQuery中确定字符串的像素长度？
提问于 2010-01-13 23:15:14
在jQuery/JavaScript中，有没有办法确定字符串的像素长度？
回答 6
Stack Overflow用户
发布于 2014-08-24 07:50:43
用于HTML画布的上下文具有用于检查字体大小的内置方法。此方法返回一个TextMetrics对象，该对象具有包含文本宽度的width属性。
function getWidthOfText(txt, fontname, fontsize){
if(getWidthOfText.c === undefined){
getWidthOfText.c=document.createElement('canvas');
getWidthOfText.ctx=getWidthOfText.c.getContext('2d');
}
var fontspec = fontsize + ' ' + fontname;
if(getWidthOfText.ctx.font !== fontspec)
getWidthOfText.ctx.font = fontspec;
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);
}
if(getWidthOfText.e.style.fontSize !== fontsize)
getWidthOfText.e.style.fontSize = fontsize;
if(getWidthOfText.e.style.fontFamily !== fontname)
getWidthOfText.e.style.fontFamily = fontname;
getWidthOfText.e.innerText = txt;
return getWidthOfText.e.offsetWidth;
}编辑2020:在Igor Okorokov的建议下添加了字体name+size缓存。
Stack Overflow用户
发布于 2010-01-13 23:19:55
我不相信你可以只做一个字符串，但是如果你把字符串放在一个具有正确属性(大小、字体粗细等)的<span>中；那么你应该能够使用jQuery来获得跨度的宽度。
<span id='string_span' style='font-weight: bold; font-size: 12'>Here is my string</span>
<script>
$('#string_span').width();
</script>Stack Overflow用户
发布于 2010-01-13 23:26:27
将其放在一个绝对定位的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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/2057682
复制相关文章
相似问题
腾讯云开发者
