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

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. 去掉A标签的虚线框

    outline是css3的一个属性,用的很少. 声明,这是个不能兼容的css属性,在ie6.ie7.遨游浏览器都不兼容. outline控制的到底是什么呢? 当聚焦a标签的时候,在a标签的区域周围会有 ...

  2. Linux命令-目录处理命令:rm

    rm grub.conf 删除当前目录中grub.conf文件 (最好是先复制一个文件,然后再删除,这样保险) rm -f grub.conf 强制删除当前目录中的grub.conf文件 (不需要确认 ...

  3. jasmine-行为驱动测试

    http://jasmine.github.io/1.3/introduction.html,先保留着,好好研究.

  4. .NET资料之-根据两点经纬度计算直线距离

    最近做东西碰到要根据两点经纬度计算之间的直线距离,就网上找了查了下资料.因为这类接触的比较少,就直接找现成的代码了,没怎么研究.代码如下,作为记录. private const double EART ...

  5. 利用国内的源安装 Python第三方库

    我们需要安装一些Python的第三方库,但是使用  pip install + 第三方库  的时候,会出现下载速度慢的问题,当然我们也可以使用国内的源安装. 例如: sudo pip install ...

  6. Django模版中的过滤器详细解析 Django filter大全

    就象本章前面提到的一样,模板过滤器是在变量被显示前修改它的值的一个简单方法. 过滤器看起来是这样的: {{ name|lower }} 显示的内容是变量 {{ name }} 被过滤器 lower 处 ...

  7. VirtualBox虚拟机扩容

    1. 在VBox下增加储存 如图,未扩容前是40G 打开cmd命令行(win+r  输入cmd打开) 将目录切换到virtual的安装目录 cd C:\Program Files\Oracle\Vir ...

  8. unity5, 在mac下多开

    mac上app的多开与app本身无关,而是系统本身的功能,使用命令 open -n 就可以实现打开某应用程序的一个新实例(自行输入man open查看含义). 参考:http://mac-how-to ...

  9. jquery常见插件用法表

    一:美化select表单:chosen.jquery.js http://harvesthq.github.io/chosen/ 关于ajax更新列表后需要触发下插件的事件,才会表现出来:(http: ...

  10. 【打CF，学算法——二星级】Codeforces Round #313 (Div. 2) B. Gerald is into Art（水题）

    [CF简单介绍] 提交链接:http://codeforces.com/contest/560/problem/B 题面: B. Gerald is into Art time limit per t ...