js小工具-模拟计算一行文本的宽度

1.简介

这个小工具应该一般人都用不到，我也是在完善项目的echarts相关功能的时候才会用到这么偏门的东西。

2.代码实现

代码就比较简单啦，不解释

var dc = {
	//计算一行字符串在页面上占用的宽度
	getStringWidth: function(str,styles){
		//影响文字宽度的样式主要是font-size和font-weight，styles中没有这两个属性，则继承自body，结果可能产生误差
		if(!str||str.length<=0) return 0;
		var $span = $('<span></span>').html(str).css({
			"white-space": "nowrap",
			"line-height": 1,
			"position": "absolute",
			"z-index": -1,
			"opacity": 0,
			"filter": "alpha(opacity=0)",
			"-ms-filter": "alpha(opacity=0)"
		}).appendTo('body');
		if(styles){
			try{$span.css(styles);}catch(e){}
		}
		var width = $span.width();
		$span.remove();
		return width;
	}
}

3.结语

本文写于20190826，仓促总结，有待完善。