JS怎么计算html标签里文字的宽度
Posted ypm_wbg
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS怎么计算html标签里文字的宽度相关的知识，希望对你有一定的参考价值。
方法： 做一个空的html 标签 id为“ruler”,样式为“position:absolute;visibility: hidden; white-space: nowrap;z-index: -100”;
目的为了不影响页面，只是用来放你要测的文字的宽度，得到目标文字的内容，大小和字体.放到如下方法就行了：
String.prototype.visualLength = function(size,family)
{
var ruler = $("#ruler").css({
"font-size":size || "inherit",
"font-family":family || "inherit"
});
ruler.text(this);
return ruler.width();
}
实例如下：
<!DOCTYPE html>
<html>
<head>
</head>
<style>
#ruler {
position:absolute;
visibility: hidden;
white-space: nowrap;
z-index: -100;
}
</style>
<body>
<span id="ruler">test</span>
<span >tasdfasdfasdfest</span>
<script src="./jquery.min.js"></script>
<script>
String.prototype.visualLength = function(size,family)
{
var ruler = $("#ruler").css({
"font-size":size || "inherit",
"font-family":family || "inherit"
});
ruler.text(this);
return ruler.width();
}
var text = "tasdfasdfasdfest";
var len = text.visualLength("16px");
console.log(len)
</script>
</body>
</html>
以上是关于JS怎么计算html标签里文字的宽度的主要内容，如果未能解决你的问题，请参考以下文章