1分鐘學(xué)會如何用 JS 計算文本的寬度

在項目開發(fā)中，我們有時候需要計算文本的內(nèi)容寬度，你是怎么做的呢？今天看到一篇關(guān)于此內(nèi)容的簡短文章在此分享給大家。

方法一：使用 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() 方法返回一個關(guān)于被測量文本對象的信息（只有寬度）。因此我們將文本放入畫布，然后計算其寬度，示例代碼如下所示：

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)

• 首先我們定義了文本及樣式大小
• 接下來我們創(chuàng)建畫布
• 然后調(diào)用 measureText 方法獲取指定文本相關(guān)的信息

運行上述代碼，你將會看到 84.4453125 的輸出

總結(jié)

今天的文章就分享到這里，我們了解了可以使用 clientHeight 、clientWidth 屬性獲取元素，然后計算文本的寬與高。除了此方法，我們還可以使用 measureText 和 canvas（畫布）獲取文本的寬度（只有寬度），感謝你的閱讀。

參考來源?

網(wǎng)址：https://javascript.plainenglish.io/how-to-calculate-text-width-with-javascript-4726a91f98a1

作者：John Au-Yeung