Javascript Element.getBoundingClientRect API

日常开发中遇到一个需求是需要计算某个字符串的长度，用到了 Element.getBoundingClientRect() 方法。

Element.getBoundingClientRect() 介绍

看一下mdn的解释：

The Element.getBoundingClientRect() method returns a DOMRect object providing information about the size of an element and its position relative to the viewport.

说的是这个函数会返回一个DOMRect对象，这个对象中会包含当前dom元素的一些信息，如相对于视窗的位置、宽高等。

需要注意的是这里返回的元素的宽高是包含元素的border-width和padding的，因为盒子默认的是标准盒模型（standard box），如果设置了box-sizing：border-box的话，则获取到的宽高只包含元素内容的宽高。

DOMRect对象

DOMRect对象描述了一个矩形的大小和位置，属性都是只读的。

通过mdn上的一个demo看一下都有哪些属性吧:

html

<div></div>

css

div {
  width: 400px;
  height: 200px;
  background: purple;
}

javascript

let elem = document.querySelector('div');
let rect = elem.getBoundingClientRect();
for (var key in rect) {
  if(typeof rect[key] !== 'function') {
    let para = document.createElement('p');
    para.textContent  = `${ key } : ${ rect[key] }`;
    document.body.appendChild(para);
  }
}

传送门

运行结果如下：

这里的width属性正是我们想要的元素的宽度。

这里解释下，代码里没有设置margin:8px,为什么会有8像素的margin呢，是以为codePen这个在线编辑器的body有默认的8px的margin。

最终代码

其实知道了关键的方法代码也就出来了，如下这是ts的写法：

/**
 * 计算字符串的像素长度
 * @param str 输入的字符串
 * @param fontSize 字体大小
 * @returns 输入字符串的像素长度
 */
public getTextWidth(str: string,fontSize: string): number {
 let result = 0;
 const ele = document.createElement('div');
 ele.style.position = 'absolute';
 ele.style.whiteSpace = 'nowrap';
 ele.style.fontSize = fontSize;
 ele.style.fontFamily = 'inherit';
 ele.style.opacity = '0';
 ele.innerText = str;
 document.body.append(ele);
 result = ele.getBoundingClientRect().width;
 document.body.removeChild(ele);
 return result;
}

需要注意的是字符串的字体样式如fontFamily、fontSize等都会影响其宽度的，因为我的需求中字体都是Chrome默认的，只有大小会不同，所以单独把字体大小作为形参提了出来。

笔者水平有限，若有错误敬请指正，不明白的地方也可评论区留言交流~