方法： 做一个空的html 标签 id为“ruler”,样式为“position:absolute;visibility: hidden; white-space: nowrap;z-index: -100”;

　　　　目的为了不影响页面，只是用来放你要测的文字的宽度，得到目标文字的内容，大小和字体.放到如下方法就行了：
　　　　　　
String.prototype.visualLength = function(size,family)

    　　　　　　{

        　　　　var ruler = $("#ruler").css({

            　　　　"font-size":size || "inherit",

            　　"font-family":family || "inherit"

       　　　　 });

        　　ruler.text(this);

        　　return ruler.width();

   　　　　　 }

　实例如下：

<!DOCTYPE html>

<html>

<head>

</head>

<style>

    #ruler {

        position:absolute;

        visibility: hidden;

        white-space: nowrap;

        z-index: -100;

    }

</style>

<body>

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

<span >tasdfasdfasdfest</span>

<script src="./jquery.min.js"></script>

<script>

    String.prototype.visualLength = function(size,family)

    {

        var ruler = $("#ruler").css({

            "font-size":size || "inherit",

            "font-family":family || "inherit"

        });

        ruler.text(this);

        return ruler.width();

    }

    var text = "tasdfasdfasdfest";

    var len = text.visualLength("16px");

    console.log(len)

</script>

</body>

</html>

　　

												


											
JS怎么计算html标签里文字的宽度的更多相关文章
	

    
								
  1. [寒江孤叶丶的Cocos2d-x之旅_33]RichTextEx一款通过HTML标签控制文字样式的富文本控件
		
    RichTextEx一款通过HTML标签控制文字样式的富文本控件 原创文章,欢迎转载.转载请注明:文章来自[寒江孤叶丶的Cocos2d-x之旅系列] 博客地址:http://blog.csdn.net ...
    
		
    2. 
						
  2. js 面向对象 动态添加标签
		
    有点逻辑 上代码 thml布局 点击查看代码 <!DOCTYPE html> <html lang="en"> <head> <meta  ...
    
		
    3. 
						
  3. 将javascript函数写在Html标签里
		
    有些时候不想把函数写在script标签里了,想直接在html标签里直接加上js代码,可以这样写: <body onload="javascript:{window.location.h ...
    
		
    4. 
						
  4. js控制精度的加减乘除：js浮点数计算问题
		
    //加法函数 function accAdd(arg1, arg2) { var r1, r2, m; try { r1 = arg1.toString().split(".")[ ...
    
		
    5. 
						
  5. Asp.Net正则获取页面a标签里的内容
		
    Asp.Net正则获取页面a标签里的内容 string url = "http://www.114369.com"; string html = MyCLib.NetClass.S ...
    
		
    6. 
						
  6. 关于js中select的简单操作，以及js前台计算，span简单操作
		
    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
    
		
    7. 
						
  7. 浅谈 js 语句块与标签
		
    原文:浅谈 js 语句块与标签 语句块是什么?其实就是用 {} 包裹的一些js代码而已,当然语句块不能独立作用域.可以详细参见这里<MDN block> 也许很多人第一印象 {} 不是对象 ...
    
		
    8. 
						
  8. img标签里的value获取
		
    简单描述:在img标签里的value存放了需要用到的值,但是在js中获取的时候,我直接写的就是$("#imgStr").val(),结果发现是空,后来查了一下,才知道,img的va ...
    
		
    9. 
						
  9. js前台计算两个日期的间隔时间
		
    js前台计算两个日期的间隔时间(时间差)原创 2017年08月28日 16:09:43 标签:javascript 1144在后台传来两个时间字段,从中解析出两个字符串类型的日期格式 需要在前台解析出 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Jmeter(九)压力测试
			
    一般我们在做压力测试的时候,分单场景和混合场景,单场景也就是咱们压测单个接口的时候,多场景也就是有业务流程的情况下,比如说一个购物流程,那么这样的场景就是混合场景,就是有多个接口一起来做操作.1.单场 ...
    
			
    2. 
						
  2. 汇编文件后缀.s与.S
			
    转载:http://www.cnblogs.com/IamEasy_Man/archive/2011/08/10/2134212.html 一.大小写后缀的区别: .s:  汇编语言源程序;汇编 .S ...
    
			
    3. 
						
  3. 使用python操作json文本文件
			
    使用python读写文本文件内容时,我们知道如果文本文件里的内容无规律,那么修改起来比较麻烦.但是如果文本文件存储是有规律的,比如JSON格式,在利用python内置的函数把JSON格式的数据转成py ...
    
			
    4. 
						
  4. strtok - 详细示例解析
			
    定义: Defined in header <string.h> 原型: char strtok( char str, const char *delim ); 参数: 2个都是字符串(以 ...
    
			
    5. 
						
  5. Oracle 常见问题汇总
			
    1.Listener refused the connection with the following error 安装之后如果遇到如下问题状态: 失败 -测试失败: Listener refuse ...
    
			
    6. 
						
  6. ruby on rails 数据库操作
			
    (1)增加列的操作 rails generate migration add_password_digest_to_students password_digest:string bundle exe ...
    
			
    7. 
						
  7. javascript 类型 内存 对象
			
    var box =0 function test() { alert(box) //全局 }
    
			
    8. 
						
  8. httpfs的使用
			
    在项目中使用到hdfs作为存储,为了在不同的节点加载hdfs上的数据,我们使用nfsv3服务,在客户端使用 root来mount hdfs上的数据到本地,然后把本地的数据发到hdfs上,因为这个我们的 ...
    
			
    9. 
						
  9. Ubuntu14.04+caffe+cuda7.5 环境搭建以及MNIST数据集的训练与测试
			
    Ubuntu14.04+caffe+cuda 环境搭建以及MNIST数据集的训练与测试 一.ubuntu14.04的安装: ubuntu的安装是一件十分简单的事情,这里给出一个参考教程: http:/ ...
    
			
    10. 
						
  10. Ubuntu16.04 sever 安装
			
    插入U盘,开机有两个USB启动方式(传统模式和UEFI模式): 启动快速,我选择了UEFI模式,跳过BIOS初始化. 用启动盘成功引导之后,出现下面的界面 选择安装语言:中文(简体) 默认第一项:安装 ...
    
			
    11.