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

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. Zepto源代码分析一~核心方法

    今天抽出时间复习了一下Zepto的源代码,依照自己的理解进行凝视. 欢迎大家拍砖. 源代码版本号:v1.1.4 源代码下载地址:http://zeptojs.com/ 分析总体代码之后,整理出架构图: ...

  2. python __path__ 变量

    今天在读django源码的时候遇到了一个问题!它就是__path__这个系统变量 一.__path__变更初见: 由__path__这个变量的名字就知道,这个是一个系统变量,不是用户自定义的变量,于是 ...

  3. 对象.delegate=self的理解

    整理自:http://www.cocoachina.com/ask/questions/show/87430 各位大神,对象.delegate=self是啥意思,委托的意思不就是自己的任务交给其他人去 ...

  4. App Extension的脱壳办法

    App Extension的脱壳办法 从app store下载的app和app extension是加过密的,可以通过otool查看: $ otool -l binary_name | grep cr ...

  5. JqERY

    //下拉菜单样式 /*查找全部select的下拉菜单*/ function getElemsById(cot_val){ return document.getElementById(cot_val) ...

  6. Ubuntu 给应用程序添加桌面图标（本文以Eclipse为例）

    这里以Eclipse为例: eclipse是下载的是解压就能用的,但是没有桌面图标就显得很无力了. 自己写了一个eclipse.desktop放到/usr/share/applications/目录下 ...

  7. lo4j 日志级别

    日志记录器(Logger)的行为是分等级的.如下表所示: 分为OFF.FATAL.ERROR.WARN.INFO.DEBUG.TRACE.ALL或者您定义的级别.Log4j建议只使用四个级别,优先级从 ...

  8. iOS开发 支持https请求以及ssl证书配置(转)

    原文地址:http://blog.5ibc.net/p/100221.html 众所周知,苹果有言,从2017年开始,将屏蔽http的资源,强推https 楼主正好近日将http转为https,给还没 ...

  9. cocos2dx迷你地图

    用CCRenderTexture就可以了,不知是否有更好的方法. if (!miniMap) { miniMap=CCSprite::create(); miniMap->setZOrder() ...

  10. haproxy+keepalived实现高可用负载均衡（转）

      软件负载均衡一般通过两种方式来实现:基于操作系统的软负载实现和基于第三方应用的软负载实现.LVS就是基于Linux操作系统实现的一种软负载,HAProxy就是开源的并且基于第三应用实现的软负载. ...