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

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. JavaScript 中 substr 和 substring的区别

    http://www.cnblogs.com/meil/archive/2007/01/05/598528.htmlString.substr(N1,N2) 这个就是我们常用的从指定的位置(N1)截取 ...

  2. C#指南，重温基础，展望远方！（7）C#结构

    结构是可以包含数据成员和函数成员的数据结构,这一点与类一样:与类不同的是,结构是值类型,无需进行堆分配. 结构类型的变量直接存储结构数据,而类类型的变量存储对动态分配的对象的引用. 结构类型不支持用户 ...

  3. Python3 isidentifier() 方法

    描述 Python3 isidentifier() 方法用于判断字符串是否是有效的 Python 标识符,可用来判断变量名是否合法. 语法 isidentifier() 方法语法: S.isident ...

  4. java开发中国际化

    1 静态文本的国际化,就是比如页面中中文显示用户名就是用户名,用于显示就是 username. 其中静态文件命名遵循:基础名_语言简称_国家简称.properties 需要使用的类是 1)import ...

  5. ajax处理select下拉表单

    $('#gameid').change(function() { var gameid = $(this).val(); if (this.value != '') { $.ajax({ url: ' ...

  6. android.view.animation(3) - LayoutAnimationController 和 GridLayoutAnimationController

    前几篇给大家讲述了如何针对某一个控件应用动画,这篇将给大家讲解如何给容器中的控件应用统一动画.即在容器中控件出现时,不必为每个控件添加进入动画,可以在容器中为其添加统一的进入和退出动画. 从上面的示例 ...

  7. 在编写JSP的时候出现XXX cannot be resolved to a type

    今天遇到这个情况,却发现是eclipse抽风,说javax.servlet.http.Cookie找不到定义,但是经过浏览器测试,可以运行,而JSP源文件中eclipse死活要报错.表示无语. 关于e ...

  8. dp之01背包hdu3466(带限制的，当你所拥有的钱数大于某个限定值时才可以购买该物品)

    题意:买东西,每个东西有三个特征值,p代表价格,q代表你手中钱必须不低于q才能买这个物品,v代表得到的价值. mark:又是变种01背包,每做一个变种的,就是一种提高.. 按照q - p以由大到小的顺 ...

  9. MapReduce编程实例6

    前提准备: 1.hadoop安装运行正常.Hadoop安装配置请参考:Ubuntu下 Hadoop 1.2.1 配置安装 2.集成开发环境正常.集成开发环境配置请参考 :Ubuntu 搭建Hadoop ...

  10. QT 5.7.0 移植之 tslib 编译配置

    QT5.7 编译请参考:http://www.cnblogs.com/chenfulin5/p/5798764.html 最新的 tslib 是从他的 github 下载下来的. 地址是:https: ...