代碼來源是u012860063的這篇文章https://blog.csdn.net/u012860063/article/details/53105658。我將其封裝爲一個函數，並實現了刪除臨時DIV的功能，然後對其中不知要的參數做了默認值，最後實現了自定義臨時DIV的ID功能以避免可能的ID衝突。
用途：做網頁自定義右鍵菜單的時候，尤其是其中有動態添加的項目的時候，可以根據字符串設置菜單的寬度，避免不必要的餘白。
/*
* @description 計算字符串顯示寬度/高度
* @author ErikaEmma <[email protected]>
* @copyright 根據u012860063的csdn博文所寫
* @see https://blog.csdn.net/u012860063/article/details/53105658
* @param {string} str 要計算顯示寬度/高度信息的字符串
* @param {string} fontFamily 字體，默認爲空
* @param {string} fontSize 字體大小，默認爲空
* @param {string} addDivId 自定義臨時DIV的ID，默認'labelText'
* @param {string} appendTO 自定義臨時DIV添加容器，默認body
* @return {object} 返回包含width和height成員的對象
*/
function getStrLength() {
var str = arguments[0] ? arguments[0] : '';
var fontFamily = arguments[1] ? arguments[1] : ''; //Microsoft YaHei
var fontSize = arguments[2] ? arguments[2] : ''; //12px
var addDivId = arguments[3] ? arguments[3] : 'labelText';
var appendTo = arguments[4] || 'body';
$(appendTo).append("<div id='" + addDivId + "' style='color:black;line-height:1.2;white-space:nowrap;top:0px;left:0px;position:fixed;display:block;visibility:visible;'>");
var add = $('#' + addDivId);
add.css({
'font-size': fontSize,
'font-family': fontFamily
}).html(str);
var ret = {'width': add.width(), 'height': add.height()};
add.remove();
return ret;
}
附上測試代碼（基於jquery-3.3.1.min.js）：
<!DOCTYPE html>
<html>
<head>
<title>Test getStrLength()</title>
<script src='jquery-3.3.1.min.js'></script>
<script src='getStrLength.js'></script>
</head>
<body>
<p>Get width of string 'Hello, world!' by default font-size and default font-family: <span id='test' style="color: red;"></span>.</p>
<script>
var ret = getStrLength('Hello, world!');
$('#test').html(ret.width);
</script>
</body>
</html>
再附上測試結果：
IE：104
Edge：97.13
Chrome：97.1375