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 相关文章推荐
jquery 可拖拽的窗体控件实现代码
Mar 21 Javascript
JavaScript 格式字符串的应用
Mar 29 Javascript
jquery validate使用攻略 第四步
Jul 01 Javascript
利用javascript判断文件是否存在
Dec 31 Javascript
jQuery设置指定网页元素宽度和高度的方法
Mar 25 Javascript
js clearInterval()方法的定义和用法
Nov 11 Javascript
Javascript中的Prototype到底是什么
Feb 16 Javascript
javascript cookie的简单应用
Feb 24 Javascript
jQuery中通过ajax的get()函数读取页面的方法
Feb 29 Javascript
confirm确认对话框的实现方法总结
Jun 17 Javascript
详解jquery选择器的原理
Aug 01 jQuery
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
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 intval的测试代码发现问题
2008/07/27 PHP
php实现mysql同步的实现方法
2009/10/21 PHP
php实现监控varnish缓存服务器的状态
2014/12/30 PHP
Laravel框架中实现使用阿里云ACE缓存服务
2015/02/10 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
js 火狐下取本地路径实现思路
2013/04/02 Javascript
JavaScript记录光标在编辑器中位置的实现方法
2016/04/22 Javascript
jQuery hover事件简单实现同时绑定2个方法
2016/06/07 Javascript
通过BootStrap实现轮播图的实际应用
2016/09/26 Javascript
javascript实现无法关闭的弹框
2016/11/27 Javascript
vue按需引入element Transfer 穿梭框
2017/09/30 Javascript
vue router仿天猫底部导航栏功能
2017/10/18 Javascript
浅谈vue2 单页面如何设置网页title
2017/11/08 Javascript
小程序图片长按识别功能的实现方法
2018/08/30 Javascript
ES6 更易于继承的类语法的使用
2019/02/11 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
2019/06/18 jQuery
vue css 引入asstes中的图片无法显示的四种解决方法
2020/03/16 Javascript
element-ui tree结构实现增删改自定义功能代码
2020/08/31 Javascript
python实现指定字符串补全空格的方法
2015/04/30 Python
Python中使用插入排序算法的简单分析与代码示例
2016/05/04 Python
Python中格式化format()方法详解
2017/04/01 Python
python 对字典按照value进行排序的方法
2019/05/09 Python
PyCharm下载和安装详细步骤
2019/12/17 Python
python dataframe NaN处理方式
2019/12/26 Python
使用Python操作ArangoDB的方法步骤
2020/02/02 Python
PyQt5高级界面控件之QTableWidget的具体使用方法
2020/02/23 Python
新奥尔良珠宝:Mignon Faget
2020/11/23 全球购物
Ibatis的核心配置文件都有什么
2014/09/08 面试题
产品促销活动策划书
2014/01/15 职场文书
护理专业自荐信范文
2014/02/26 职场文书
初三学习计划书范文
2014/04/30 职场文书
谢师宴学生致辞
2015/07/27 职场文书
爱国教育主题班会
2015/08/14 职场文书
《黄道婆》教学反思
2016/02/22 职场文书
《游戏王:大师决斗》将推出新卡牌包4月4日上线
2022/03/31 其他游戏
Android Canvas绘制文字横纵向对齐
2022/06/05 Java/Android