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

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. unity, 相机空间 与 相机gameObject的局部空间

    在unity里 相机空间 与 相机gameObject的局部空间 不重合. Camera.worldToCameraMatrix的文档中有这样一句话: Note that camera space m ...

  2. [svc]jq神器使用

    jq神器 处理json数据 支持过滤某字段 支持数学运算(对字段处理) 安装 yum install -y jq 使用 参考: http://blog.just4fun.site/command-to ...

  3. shell脚本中执行mysql命令

    1.mysql -hhostname -uuser -ppsword -e "mysql_cmd" 2. mysql -hhostname -uuser -ppsword < ...

  4. 深入理解Spark 2.1 Core （十一）：Shuffle Reduce 端的原理与源代码分析

    http://blog.csdn.net/u011239443/article/details/56843264 在<深入理解Spark 2.1 Core (九):迭代计算和Shuffle的原理 ...

  5. 全局描述符表GDT

    写在前面 添油加醋系列第二弹--剖析GDT 头文件:https://github.com/bajdcc/MiniOS/blob/master/include/gdt.h 实现:https://gith ...

  6. Makefile学习之路5——通过函数增强功能

    通过函数能显著增强Makefile的功能.对于simple项目的Makefile,尽管使用了模式规则,但还是有一件比较麻烦的事情,就是要在Makefile中指明每一个项目源文件.下面介绍几个后期会使用 ...

  7. noj1475（递推题）统计多少个1

    http://acm.nbut.cn/Problem/view.xhtml?id=1475 题意:给出一个数,需要你统计在这个数范围内有多少个1........ 思路:从高位到低位计算,例如1312 ...

  8. Apache Avro:一个新的数据交换格式

    原文: http://blog.cloudera.com/blog/2009/11/avro-a-new-format-for-data-interchange/ 注:由于个人英语能力有限,翻译不准确 ...

  9. iOS中的动画(转载)

    iOS中的动画  最近两天没事在慢慢学习一些动画,好多东西长时间不用都给忘了,找到一篇介绍很详细的文章就粘贴了过来以备复习,原文地址:https://my.oschina.net/aofe/blog/ ...

  10. 史上最严管控，Android P非SDK接口管控特性解读及适配

    导读 在 Android P 版本中,谷歌加入了非 SDK 接口使用限制,无论是通过调用.反射还是JNI等方式,开发者都无法对非 SDK 接口进行访问,此接口的滥用将会带来严重的系统兼容性问题. 针对 ...