js获取字符串像素宽度

前端为了坐字符串显示的适配，经常需要判断某个格子能显示多少个字符，下面给出我的解决方案；

思路

js本身是不提供这种接口的，但是可以知道，行内标签如span的宽度在不设置边距等参数的情况下，标签对应元素的宽度就是内容的宽度，因此，可以使用span标签来获取字符串对应的宽度

示例代码

    getTextWidth(str,fontSize)
	{
		let result = 10;

		let ele = document.createElement('span')
		//字符串中带有换行符时，会被自动转换成<br/>标签，若需要考虑这种情况，可以替换成空格，以获取正确的宽度
        //str = str.replace(/\\n/g,' ').replace(/\\r/g,' ');
		ele.innerText = str;
		//不同的大小和不同的字体都会导致渲染出来的字符串宽度变化，可以传入尽可能完备的样式信息
		ele.style.fontSize = fontSize; 
		
		//由于父节点的样式会影响子节点，这里可按需添加到指定节点上
		document.documentElement.append(ele);

		result =  ele.offsetWidth;

		document.documentElement.removeChild(ele);
		return result;
	}