JavaScript 如何精准的获取文字宽高

JavaScript 精确获取文字宽高依赖于测量文本在相应样式下渲染时的尺寸，常用方法有：创建离屏canvas进行测量、使用DOM元素的getBoundingClientRect方法、以及利用Range对象。通过创建离屏canvas进行测量是最为精确且通用的方法，因为它能模拟具体的字体和样式，不受页面布局的限制。

一、创建离屏CANVAS进行测量

创建Canvas元素

首先，需要在内存中创建一个canvas元素，这个元素并不会添加到DOM中，因此被称为“离屏”。

const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');

设置文字样式

然后，按照需要测量的文字的样式设置context的字体样式，包括字体大小、字体类型等。

context.font = '16px Arial';

测量文字宽度

通过context的measureText方法可以测量出文字的宽度。

const metrics = context.measureText('你的文字');
const width = metrics.width;

测量高度

文字的高度测量比较复杂，因为measureText方法并不提供高度信息。为了解决这个问题，可以通过一些间接的方法，比如设置一定范围的字体大小，然后通过比率计算可能的高度。

const fontSize = 16; // 假设字体大小为16px
const height = fontSize * 1.2; // 通常情况下行高是字体大小的1.2倍

二、USING `getBoundingClientRect` 方法

创建文本元素

首先，创建一个含有目标文本的DOM元素。

<span id="textElement" style="font-size: 16px; font-family: Arial;">你的文字</span>

应用样式并插入DOM

将样式应用到元素上，并且将元素暂时加入到DOM中以便进行测量。

const textElement = document.getElementById('textElement');
document.body.appendChild(textElement);

使用`getBoundingClientRect`进行测量

然后，使用getBoundingClientRect方法来测量文字的大小。

const rect = textElement.getBoundingClientRect();
const width = rect.width;
const height = rect.height;

清理DOM

测量完成后，应当把不再需要的元素从DOM中移除。

textElement.remove();

三、利用RANGE对象

创建Range对象

Range对象能够表示文档中的连续范围，可用于精确地获取文字的尺寸。

const range = document.createRange();

选择文本和获取尺寸

先创建包含所需文本的DOM元素，再用Range对象选择该元素，使用getBoundingClientRect方法或 getClientRects方法获取尺寸。

const textElement = document.getElementById('textElement');
range.selectNodeContents(textElement);
const rect = range.getBoundingClientRect();
const width = rect.width;
const height = rect.height;