方法： 做一个空的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. ssmWeb开发框架_2014-01
			
    一直在准备做一套系统, 具体用来干什么都没确定. 只是从纯技术人员的想法, 先搭建一套开发的框架. 做的时候才发现, 系统用途不同, 框架也是不同的. 暂时就先当作企业内部管理的系统来做吧. 后台基础 ...
    
			
    2. 
						
  2. HTML5开源RPG游戏引擎lufylegendRPG 1.0.0发布
			
    经历了几个月的改进,终于发布1.0.0版了.虽然引擎依然存在漏洞,但是比起上次更新还是要好多了.在这里不得不感谢各位网友的大力支持. 首先为引擎做一个开场白吧,也好让大家了解一下它: lufylege ...
    
			
    3. 
						
  3. OS知识点总结
			
    转自:https://blog.csdn.net/csdn_chai/article/details/78002202 1.什么是操作系统? OS是用户与硬件之间的接口,管理计算机的软件和硬件资源.  ...
    
			
    4. 
						
  4. OpenSSL拒绝服务漏洞（CNVD-2016-01479）
			
    更新OpenSSL版本. [root@nginx ~]# openssl version -a OpenSSL 1.0.1e-fips 11 Feb 2013 built on: Wed Mar 22 ...
    
			
    5. 
						
  5. vue 动画过渡
			
    一.过渡(动画) 1. 简介 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果,本质上还是使用CSS3动画:transition.animation 2. 基本用法 1.使用t ...
    
			
    6. 
						
  6. JSON-RPC（jsonrpc4j）使用demo
			
    服务端开发,在很多情况下,需要使用到RPC框架,今天发现一款很轻量的RPC框架--JSON-RPC.json rpc 是一种以json为消息格式的远程调用服务,它是一套允许运行在不同操作系统.不同环境 ...
    
			
    7. 
						
  7. 自定义admin管理工具(stark组件)
			
    自定义admin管理工具(stark组件) 创建项目 了解了admin的功能后,我们可以开始仿照admin编写我们自己的管理工具stark组件 首先创建一个新的项目,并创建三个app stark就是我 ...
    
			
    8. 
						
  8. python数据描述符
			
    Python的描述符是接触到Python核心编程中一个比较难以理解的内容,自己在学习的过程中也遇到过很多的疑惑,通过google和阅读源码,现将自己的理解和心得记录下来,也为正在为了该问题苦恼的朋友提 ...
    
			
    9. 
						
  9. javaScript动画2  scroll家族
			
    offsetWidth和offsetHight (检测盒子自身宽高+padding+border) 这两个属性,他们绑定在了所有的节点元素上.获取之后,只要调用这两个属性,我们就能够获取元素节点的宽和 ...
    
			
    10. 
						
  10. XVII Open Cup named after E.V. Pankratiev Stage 14, Grand Prix of Tatarstan, Sunday, April 2, 2017 Problem D. Clones and Treasures
			
    题目:Problem D. Clones and TreasuresInput file: standard inputOutput file: standard outputTime limit:  ...
    
			
    11.