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;
	}