1分钟学会如何用 JS 计算文本的宽度
前端达人
共 1295字，需浏览 3分钟
·
2021-10-30 11:16
在项目开发中，我们有时候需要计算文本的内容宽度，你是怎么做的呢？今天看到一篇关于此内容的简短文章在此分享给大家。
方法一：使用 clientHeight 和 clientWidth
我们都清楚，使用 clientHeight 和 clientWidth 可以计算元素的宽度和高度。在这里我们可以使用其计算文本的的宽与高。
我们可以先以一个简短的代码开始介绍，如以下 HTML 所示：
<p id='text'>
hello world
p>
接下来我们编写 JS 代码获取元素的宽与高，示例代码如下：
const fontSize = 12;
const text = document.getElementById("text");
text.style.fontSize = fontSize;
const height = text.clientHeight
const width = text.clientWidth
console.log(height, width);
首先我们通过 getElementById 获取 P 元素。
然后我们使用 clientHeight 和 clientWidth 获取元素的宽与高，运行上段代码你就会看到如下的高与宽的输出，如下所示，单位为像素：
18 222
方法二：使用 Canvas.measureText 方法
.measureText() 方法返回一个关于被测量文本对象的信息（只有宽度）。因此我们将文本放入画布，然后计算其宽度，示例代码如下所示：
const text = 'hello world'
const font = "bold 12pt arial"
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
context.font = font;
const {
width
} = context.measureText(text);
console.log(width)
首先我们定义了文本及样式大小 接下来我们创建画布 然后调用 measureText 方法获取指定文本相关的信息
运行上述代码，你将会看到 84.4453125 的输出
总结
今天的文章就分享到这里，我们了解了可以使用 clientHeight 、clientWidth 属性获取元素，然后计算文本的宽与高。除了此方法，我们还可以使用 measureText 和 canvas（画布）获取文本的宽度（只有宽度），感谢你的阅读。
参考来源
网址：https://javascript.plainenglish.io/how-to-calculate-text-width-with-javascript-4726a91f98a1
作者：John Au-Yeung
评论