jQuery(js)获取文字宽度(显示长度)示例代码


Posted in Javascript onDecember 31, 2013

今天遇到了获取文字宽度的问题,查了很久,终于在一个国外网站上找到了方法,但是不能直接使用,于是修改了一下,成功使用到了项目中,在这里分享给大家。

首先在body标签最后添加一个子标签:

<span id="ruler">test</span>

然后添加相应的css代码:
#ruler { 
visibility: hidden; 
white-space: nowrap; 
font-size: 24px; 
}

接下来直接在String的原型中添加获取文字宽度的函数,在js代码中加入以下代码即可:
String.prototype.visualLength = function() 
{ 
var ruler = $("#ruler"); 
ruler.text(this); 
return ruler[0].offsetWidth; 
}

最后在需要获取文字宽度的地方调用即可,举个例子:
var text = "test"; 
var len = text.visualLength();

主要思路是添加一个隐藏的标签,每次对该标签赋值后,通过获取该标签的长度来获取文字宽度。需要注意的是,只有已经被添加到DOM中的标签才能获取长度。

如果大家觉得对自己有帮助的话,还希望能帮顶一下,谢谢:)

Javascript 相关文章推荐
FF IE浏览器修改标签透明度的方法
Jan 27 Javascript
js实现简单鼠标跟随效果的方法
Apr 10 Javascript
浅谈jQuery中setInterval()方法
Jul 07 Javascript
jQuery插件制作的实例教程
May 16 Javascript
简单理解Vue条件渲染
Dec 03 Javascript
JavaScript中数组的各种操作的总结(必看篇)
Feb 13 Javascript
JavaScript输入框字数实时统计更新
Jun 17 Javascript
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
angularjs 动态从后台获取下拉框的值方法
Aug 13 Javascript
在Create React App中使用CSS Modules的方法示例
Jan 15 Javascript
JS中的一些常用的函数式编程术语
Jun 15 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
Apr 25 Javascript
js判断字符长度以及中英文数字等
Dec 31 #Javascript
checkbox全选所涉及到的知识点介绍
Dec 31 #Javascript
用js+iframe形成页面的一种遮罩效果的具体实现
Dec 31 #Javascript
js类式继承的具体实现方法
Dec 31 #Javascript
利用javascript判断文件是否存在
Dec 31 #Javascript
jquery实现checkbox全选全不选的简单实例
Dec 31 #Javascript
屏蔽IE弹出&quot;您查看的网页正在试图关闭窗口,是否关闭此窗口&quot;的方法
Dec 31 #Javascript
You might like
PHP中for循环语句的几种变型
2006/11/26 PHP
php高级编程-函数-郑阿奇
2011/07/04 PHP
浅析PHP程序防止ddos,dns,集群服务器攻击的解决办法
2013/06/18 PHP
thinkphp3.0输出重复两次的解决方法
2014/12/19 PHP
PHP实现通过URL提取根域名
2016/03/31 PHP
PHP中使用mpdf 导出PDF文件的实现方法
2018/10/22 PHP
laravel 解决路由除了根目录其他都404的问题
2019/10/18 PHP
如何在node的express中使用socket.io
2014/12/15 Javascript
JavaScript中数据结构与算法(二):队列
2015/06/19 Javascript
举例说明JavaScript中的实例对象与原型对象
2016/03/11 Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
2016/06/12 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
2016/08/25 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
2016/09/08 Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
2016/12/26 Javascript
bootstrap table单元格新增行并编辑
2017/05/19 Javascript
详解node如何让一个端口同时支持https与http
2017/07/04 Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
2017/08/30 Javascript
vue element-ui table表格滚动加载方法
2018/03/02 Javascript
node.js读取Excel数据(下载图片)的方法示例
2018/08/02 Javascript
[01:18]PWL开团时刻DAY4——圣剑与抢盾
2020/11/03 DOTA
[49:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第二场 3月4日
2021/03/11 DOTA
在CentOS上配置Nginx+Gunicorn+Python+Flask环境的教程
2016/06/07 Python
python中requests和https使用简单示例
2018/01/18 Python
Python assert语句的简单使用示例
2019/07/28 Python
基于python计算并显示日间、星期客流高峰
2020/05/07 Python
HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例
2015/04/24 HTML / CSS
我看到了用指针调用函数的不同语法形式
2014/07/16 面试题
高二历史教学反思
2014/01/25 职场文书
主管竞聘书范文
2014/03/31 职场文书
工厂门卫岗位职责范本
2014/04/04 职场文书
教师产假请假条
2014/04/10 职场文书
临床医学专业求职信
2014/08/08 职场文书
2014年培训工作总结范文
2014/11/27 职场文书
2015年学校精神文明工作总结
2015/05/27 职场文书
导游词之唐山景点
2019/12/18 职场文书
Windows Server 2012 R2 磁盘分区教程
2022/04/29 Servers