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

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. Linux命令-权限管理命令:chmod

    特别注意:在linux中,目录通常是有r和x两个权限的.删除文件的前题是要对文件所在的目录有w的权限才可以. cd /tmp 切换到tmp目录下面 touch chengshi.list 在当前目录中 ...

  2. mosquitto ---配置SSL/TLS

    在服务器电脑上面创建myCA文件夹, 如在/home/qa/ 文件夹下使用命令, mkdir myCA 然后执行以下命令,我们将创建并使用其他用户没有权限访问的目录. sudo chmod 700cd ...

  3. VLC命令行参数详解

    VLC命令行参数详解 2012-11-29 14:00 6859人阅读 评论(0) 收藏 举报 Usage: vlc [options] [stream] ...You can specify mul ...

  4. XML文件标签名一致,而属性值不同,如何遍历取值写法 摘录

    <EssentialFunctions>      <Qualification description="We Offer" source="AdDe ...

  5. Django URL中r的意思

    例如: urlpatterns = patterns('', # ... (r'^time/plus/\d+/$', hours_ahead), # ... ) 正则表达式字符串的开头字母“r”. 它 ...

  6. MySQL主从不一致情形与解决方法

    参考:https://blog.csdn.net/hardworking0323/article/details/81046408 https://blog.csdn.net/lijingkuan/a ...

  7. unity, GUI.Button texture is black

    GUI.Button(rect,tex),结果显示出来tex是黑的,原来是因为我以前在别处调用了GUI.contentColor =Color.black. 参考:http://answers.uni ...

  8. Redis(十八)：Redis和队列

    概要 Redis不仅可作为缓存服务器,还可用作消息队列.它的列表类型天生支持用作消息队列.如下图所示: 由于Redis的列表是使用双向链表实现的,保存了头尾节点,所以在列表头尾两边插取元素都是非常快的 ...

  9. 不错的网络协议栈測试工具 — Packetdrill

    Packetdrill - A network stack testing tool developed by Google. 项目:https://code.google.com/p/packetd ...

  10. GNU C编译器的gnu11和c11

    国际标准组织发布c11后,gnu为自己的编译器发布两种标准gnu11和c11 gnu11:带gnu c扩展的c11标准,如果你的代码包含了typeof,__attribute__等等gnu的扩展,就必 ...