获取字符串的长度很简单，但是如何获取一个字符串的字体宽度却是一个不太好操作的问题，今天查阅了许多资料，终于找到了解决方法：

1.首先，需要添加一个标签，HTML代码如下：

<body>

<span></span>

</body>

2.接下来直接在String的原型中添加获取文字宽度的函数，在js代码中加入以下代码即可：

String.prototype.visualLength = function()

        {

            let ruler = $("span");

            ruler.text(this);

            return ruler[0].offsetWidth;

        };

　3.使用js来调用这个方法：

  let text = "分";

  let len = text.visualLength();

  console.log(len);

　　效果如下：

记得要引入jq，博主使用的是es6

使用jq获取文字的宽度的更多相关文章

  1. js jq 获取网页元素宽度

    Javascript: IE中:document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度d ...

  2. jq 获取元素的宽度时，如何取得小数部分

    <!DOCTYPE html> <html> <head> <title></title> <meta name="arti ...

  3. iOS 重写UITableViewCell之动态获取label文字的宽度进行布局

    #import <UIKit/UIKit.h> @interface AppDelegate : UIResponder <UIApplicationDelegate> @pr ...

  4. Js与Jq 获取浏览器和对象值的方法

    JS and Jquery 都能获取页面元素的宽度,高度和相对位移等数值,那他们之间能相互转换或替代吗,写法又有哪些差异呢?本文将详细为你介绍. 1.Js获取浏览器高度和宽度document.docu ...

  5. js,jq获取元素位置属性及兼容性写法

    网页被卷起来的高度/宽度 document.documentElement.scrolltop //火狐 和 其他浏览器 document.body.scrolltop   //ie,谷歌浏览器和没有 ...

  6. jq获取鼠标位置

    jq获取鼠标位置 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  7. jq获取表单值与赋值代码

    jq获取表单值与赋值代码 jq获取表单值与赋值代码 $("#keyword")[0].value = ""; /*获得TEXT.AREATEXT的值*/ var ...

  8. JQuery或JavaScript获取网页的宽度、高等

    最近多次使用JQery或JavaScript获取网页的宽度或者高度,在网上搜索N久之后发现很多都是粘贴上去并没有详细的介绍,这里我将会对经常使用的一些获取页面宽高的属性,方法做详细的介绍,以便能够更加 ...

  9. 获取UILabel上最后一个字符串的位置。获取文字长度和高度，自动换行

    //行的高度. -(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPat ...

随机推荐

  1. ArcGis10.0常见错误

    1. 问题:  Arcgis10.0 组件初始化失败 解决方法:  ESRI.ArcGIS.RuntimeManager.BindLicense(ESRI.ArcGIS.ProductCode.Eng ...

  2. Mysql对结果集的各种处理操作

    c++操作- 查询mysql结果集 用mysql进行数据查询的时候,mysql会返回一个结果集给我们.接着我们需要调用mysql的api,从这个结果集中取得我们要的数据. 取完数据之后,需要释放这个结 ...

  3. Atitit.数据库新特性战略规划 mssql sql server 2008 SQL2012 SQL2014

    Atitit.数据库新特性 mssql sql server 2008 SQL2012 SQL2014 1. Sql2012 新特性 1 1.1. 增加了Sequence对象. 1 1.2. 新的分页 ...

  4. hdu 2987最大权闭合图模板类型题

    /* 最大权闭合图模板类型的题,考验对知识概念的理解. 题意:如今要辞退一部分员工.辞退每个员工能够的到一部分利益(能够是负的),而且辞退员工,必须辞退他的下属.求最大利益和辞退的最小人数. 最大权闭 ...

  5. 02、Quick Start for Windows phone

    在使用这个 SDK 提供的功能前,必须先添加类库的引用到你的工程里.参考: Download and add the libraries to the project. 定义你的 XAML 的 UI ...

  6. IBM MQ 2035 或 2013认证错误的解决方法

    第一种方法: ALTER CHL(SYSTEM.BKR.CONFIG) CHLTYPE(SVRCONN) ALTER CHL(SYSTEM.ADMIN.SVRCONN) CHLTYPE(SVRCONN ...

  7. [算法]滴滴笔试题——求最大子串和（O(n)复杂度）

    扫描法.一次扫描数组即可得出答案,复杂度O(n).这种方法用文字描述不容易说清楚,下面用每一步运算的图示来表达.伪代码如下: maxsofar=end=; ,n) end=max(end+x[i],) ...

  8. Android基础总结（八）Service

    服务两种启动方式(掌握) startService 开始服务,会使进程变成为服务进程 启动服务的activity和服务不再有一毛钱关系 bindService 绑定服务不会使进程变成服务进程 绑定服务 ...

  9. lscpu和cat /proc/cpuinfo

    lscpu的使用 描述: 此命令用来显示cpu的相关信息 lscpu从sysfs和/proc/cpuinfo收集cpu体系结构信息,命令的输出比较易读 命令输出的信息包含cpu数量,线程,核数,套接字 ...

  10. javascript jquery数组操作小结

    ----------------------------------------------------------定义数组-------------------------------------- ...