jQuery/JavaScript 计算字符串显示宽度/高度

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章