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

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. spring Log4j关于No appenders could be found for logger的警告

    (spring环境下)配置Log4j时候,当启动WEB程序时,提示了如标题的警告,具体如下:log4j:WARN No appenders could be found for logger (org ...

  2. mybatis 特殊符号转义和模糊查询和批量插入

    1 xml文件特殊符号转义 <          < >          > <>   <> &      & &apos; ...

  3. Qcon2017实录|Service Mesh：下一代微服务

    https://zhuanlan.zhihu.com/p/30292372 数人云11月Meetup报名开启,看中西方大神如何论道云原生与微服务!本文作者敖小剑老师将在本次Meetup上继续分享Ser ...

  4. C++常函数

    常函数即在类的成员函数参数列表后放置const的函数,常函数的作用是限制函数体对成员变量的修改,此外,常函数也不能调用非 常函数. #include <iostream> using na ...

  5. Activiti - 新一代的开源 BPM 引擎 (zhuan)

    http://www.ibm.com/developerworks/cn/Java/j-lo-activiti1/ ****************************************** ...

  6. 【转】shell pipe与输入输出重定向的区别

    http://www.cnblogs.com/chengmo/archive/2010/10/21/1856577.html

  7. JS学习笔记（5）--一道返回整数数组的面试题（经验之谈）

    说明: 1. 微信文章里看到的,作者是马超 网易高级前端技术经理,原文在网上搜不到,微信里可以搜“为什么你的前端工作经验不值钱?”,里面写着“转载自网易实践者社区”.(妈蛋,第二天网上就有了http: ...

  8. 关于Safe DOG的文件上传bypass

    Author:倾旋payloads@aliyun.com本文由科拉实验室成员倾旋原创文章 Part 1 分析 此文主要研究安全狗的数据包分析功能,由于很多人都认为安全狗是通过正则去匹配的,那么暂且那么 ...

  9. swift学习经验和错误记录

    1.selector 和action 直接用字符串,后面要加冒号":" 2.StoryBoard 连接后改名又重新连接出现了找不到符号的诡异错误,unknow class xxxx ...

  10. android版本号始终为1

    之前用Eclipse里时,版本号是检查是做如下 <manifest xmlns:android="http://schemas.android.com/apk/res/android& ...