代码来源是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