在jQuery/JavaScript中,有没有办法确定字符串的像素长度?
发布于 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缓存。
发布于 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>
发布于 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>
https://stackoverflow.com/questions/2057682
复制相似问题