方法： 做一个空的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. 汇智课堂 Node.js相关课程
			
    Node.js入门 Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台, 用来方便地搭建快速的 易于扩展的网络应用· Node.js 借助事件驱动, 非阻塞I/O 模型 ...
    
			
    2. 
						
  2. 创建发布Webservice以及wsimport工具
			
    一. 通过wsimport生成本地代理调用WebService 1.推荐的访问服务方式 WebService已纳入w3c规范,其他的平台都支持该规范 :J2EE\Php\.NET都支持wsimport ...
    
			
    3. 
						
  3. glib简单记录包括字符串，主循环，回调函数和xml解析
			
    一.将最近用到的glib字符串功能整理了下直接用程序记录比较好看懂 #define MAX_LEN 100gchar * demo (char* msg, ...){    gchar * pcfgf ...
    
			
    4. 
						
  4. 元类 metaclass
			
    metaclass 类由Type创建 对象由创建 MetaClass作用 用来指定当前类由谁来创建(默认type创建). MetaClass 会被继承,如果父类指定了元类,那么子类也是由这个元类创建  ...
    
			
    5. 
						
  5. android studio 版本修改无效解决方案
			
    我们都知道android的版本声明,是在AndroidManifest.xml文件里面的.例如 <manifest xmlns:android="http://schemas.andr ...
    
			
    6. 
						
  6. TOSCA自动化测试工具ppt（正在整理）
			
    1.  认识TOSCA 安装使用 2.  TOSCA自动化测试工具的优点 1).  可扩展 Tosca Commander™ functionalities can be extended by us ...
    
			
    7. 
						
  7. 分布式系统 SOA与中间件
			
    在分布式系统中,有一个基础的理论 CAP,Consistency一致性 Availability可用性 Partition Tolerance分区容忍性,任何一个系统都不可能同时满足这三个条件(高富帅 ...
    
			
    8. 
						
  8. pyinstaller 打包生成的exe文件，在其他电脑上报错
			
    解决方法: 1.第一种情况,在打包的时候不要加参数-w,看一下执行exe文件后出现的报错再看下一步的行动 2.应该是需要装一个VC 2015 x64(下载地址:https://www.microsof ...
    
			
    9. 
						
  9. ORA-00257: archiver error的解决方法
			
    背景:多个用户同时做测试数据,有时候突然Oracle系统就崩溃了,然后报一个ORA-00257: archiver error. Connect internal only, until freed的 ...
    
			
    10. 
						
  10. 【ES6】改变 JS 内置行为的代理与反射
			
    代理(Proxy)可以拦截并改变 JS 引擎的底层操作,如数据读取.属性定义.函数构造等一系列操作.ES6 通过对这些底层内置对象的代理陷阱和反射函数,让开发者能进一步接近 JS 引擎的能力. 一.代 ...
    
			
    11.