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

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. js实现同时提交多个表单

    http://www.jb51.net/article/17284.htm 两种方法: 1.使用ajax异步提交表单.方法简单,jQuery插件等都能实现. 2.使用iframe.方法很原始,较麻烦. ...

  2. mybatis WARN No appenders could be found for logger的解决方法

    log4j:WARN No appenders could be found for logger (org.apache.ibatis.logging.LogFactory).log4j:WARN ...

  3. IIS自定义404错误不能生效的原因

    通过IIS自定义错误信息的功能,来自定义的404错误页面. 先制作显示错误信息的htm文件404.htm(随便什么名都行),我把文件入在根目录下. 使用Url类型,设置“/404.htm ”,可以成功 ...

  4. UML建模学习3：UML基本构造块之关系

    今天我们来看UML基本构造块的还有一个要素--关系. UML中有表示基本图示符号之间的关系,它们是:依赖(dependency).泛化(generalization,也有的称继承).实 现(reali ...

  5. JSON对象和JSON字符串以及JSON.parse 函数的使用

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. Mysql 的位运算符详解，mysql的优先级

    位运算是将给定的操作数转化为二进制后,对各个操作数每一位都进行指定的逻辑运算,得到的二进制结果转换为十进制数后就是位运算的结果.MySQL 5.0 支持6 种位运算符,如表4-4 所示. 可以发现,位 ...

  7. 安卓-APP安装后多个图标的解决

    原因是在不同Activity的intent中配置了多个LAUNCHER. <intent-filter> <action android:name="android.int ...

  8. C++ string long double转char*

    long long q = 10; ]; char* output; sprintf(s, "%ld", q); output = s; double ]; sprintf(s1, ...

  9. docker容器跑tomcat遇到的坑

    使用docker容器跑tomcat,由于同一个宿主机上跑了多个容器,再加上宿主机本身跑了很多进程,导致系统总的进程数达到了8000+,而容器中tomcat的启动脚本中会调用自带的setenv.sh,在 ...

  10. CGameMainScene类

    #ifndef __GAMEMAIN_SCENE_H__ #define __GAMEMAIN_SCENE_H__ #include "cocos2d.h" #include &q ...