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

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

首先在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中的标签才能获取长度。

如果大家觉得对自己有帮助的话，还希望能帮顶一下，谢谢：）

赞 (0)

相关推荐

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

    今天遇到了获取文字宽度的问题,查了很久,终于在一个国外网站上找到了方法,但是不能直接使用,于是修改了一下,成功使用到了项目中,在这里分享给大家. 首先在body标签最后添加一个子标签: 复制代码 代码如下: <span id="ruler">test</span> 然后添加相应的css代码: 复制代码 代码如下: #ruler { visibility: hidden; white-space: nowrap; font-size: 24px; } 接下来直接在

  • Js获取数组最大和最小值示例代码

    做项目的时候遇到一个返回查询内容里面,只取最大和最小值问题. 首先 复制代码 代码如下: /** * 数组最大值 * @param {Object} array * @return {TypeName} */ Array.max=function(array) { return Math.max.apply(Math,array); } /** * 数组最小值 * @param {Object} array * @return {TypeName} */ Array.min=function(a

  • jquery js 获取时间差、时间格式具体代码

    调取 复制代码 代码如下: GetDateDiff(start, end, "day") /* * 获得时间差,时间格式为 年-月-日 小时:分钟:秒 或者 年/月/日 小时:分钟:秒 * 其中,年月日为全格式,例如 : 2010-10-12 01:00:00 * 返回精度为:秒,分,小时,天 */ function GetDateDiff(startTime, endTime, diffType) { //将xxxx-xx-xx的时间格式,转换为 xxxx/xx/xx的格式 star

  • js获取当前时间显示在页面上并每秒刷新

    方法很简单,代码也很简洁,直接奉上代码吧 复制代码 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js获取当前时间显示在页面上</title> <script> window.onload=function(){ //定时器每秒调用一次fnDate() setInterval(f

  • 使用jquery/js获取iframe父子级、同级获取元素的方法

    在web开发中,经常会用到iframe,难免会碰到需要在父窗口中使用iframe中的元素.或者在iframe框架中使用父窗口的元素 js 在父窗口中获取iframe中的元素 1. 格式:window.frames["iframe的name值"].document.getElementById("iframe中控件的ID").click(); 实例:window.frames["ifm"].document.getElementById("

  • JS获取各种宽度、高度的简单介绍

    JS获取各种宽度、高度的简单介绍

    有时候项目中会用到用js获取元素位置来定位元素,首先通过图片说明scrollWidth,clientWidth,offsetWidth的关系. JS获取各种宽度.高度的简单介绍: scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 of

  • 基于JS实现Flappy Bird游戏的示例代码

    基于JS实现Flappy Bird游戏的示例代码

    前言 Flappy Bird 是一款无尽的游戏,玩家可以控制一只鸟.玩家必须保护小鸟免于与管道等障碍物相撞.每次小鸟通过管道时,分数都会增加一.当小鸟与管道碰撞或因重力而坠落时,游戏结束.以下部分描述了构建此游戏必须采取的步骤. 游戏可以通过这个链接进入 完整源码地址 实现代码 HTML 部分:在此部分中,创建和加载游戏的元素.选择背景.鸟类.障碍和得分元素的图像.接下来,我们创建并链接 style.css 和 index.js 文件. <!DOCTYPE html> <html>

  • jquery自定义插件——window的实现【示例代码】

    jquery自定义插件——window的实现【示例代码】

    本例子实现弹窗的效果: 1.jquery.show.js /* * 实现功能:点击在鼠标位置显示div * 版本序号:1.0 */ (function($){ $.fn.showDIV = function(options){ var defaults = {}; var options = $.extend(defaults, options); var showdiv=$(this); var close, title, content; close=$(" "); title=$

  • 利用js实现前后台传送Json的示例代码

    无论使用什么框架都存在着从controller向Html页面或者jsp页面传递数据的问题,最常用的方式是传递Json字符串.以前对这块知识有些模糊,现在整理一下. [Jquery基本方法] 实现传值常用的是Jquery以及内部封装的ajax.首先看一下jquery的get()和post()语法.get()方法是从服务器获得数据,其主要参数就是获得后台请求地址,以及负责处理的回调函数: $.get(URL,callback); $("button").click(function(){

  • django js实现部分页面刷新的示例代码

    例子中,我用的是显示机器上的进程信息的表格,获取不同的机器的进程信息时,更新这个展示信息的表格,如下: 当我在输入框中输入ip时,我希望只是更新这个表格,页面其他部分不变,实现方式如下: 1.在原页面中设置这个表格的id为pstable <table class="table table-striped" id="pstable"> <thead> <tr> <th>user</th> <th>

随机推荐