方法： 做一个空的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. 16.遇到就jar mismatch! Fix your dependencies的问题
			
    这是因为两个项目的jar包(android-support-v4.jar)不一致. 解决方法是把2个jar都删除,然后各自加上最新的jar包 但是换了之后发现R文件编不出来,原因是minsdk的设置问 ...
    
			
    2. 
						
  2. dijstra算法，求源点到各个顶点的最短距离
			
    1:dijstra算法常用语求最短距离, dijstra每次从未发现节点n[]中,发现距离源点最短的节点m,求出最短节点后,将m添加到已发现节点y[]中,用该节点m进行更新其它未发现节点n[]-m的最 ...
    
			
    3. 
						
  3. Linux常见系统命令与文件操作
			
    一.Linux常见文件操作 (1)cd /: 在Linux 系统中斜杠“/”表示的是根目录. cd / ,即进入根目录. (2)cd ~命令是,进入用户在该系统的home目录,例如xz用户,则进入/r ...
    
			
    4. 
						
  4. lua全局状态机
			
    本文内容基于版本:Lua 5.3.0 global_State概述 global_State结构,我们可以称之为Lua全局状态机.从Lua的使用者角度来看,global_State结构是完全感知不到的 ...
    
			
    5. 
						
  5. C# 使用 Windows API 发送文件到打印机
			
    最近需要做一个打印的功能,于是在网上找到了这么一个方法. [StructLayout(LayoutKind.Sequential, CharSet = CharSet.Ansi)] public cl ...
    
			
    6. 
						
  6. 资料：mnist.pkl.gz数据包的下载以及数据内容解释
			
    deeplearning.net/data/mnist/mnist.pkl.gz The MNIST dataset consists of handwritten digit images and  ...
    
			
    7. 
						
  7. ashx  方法模板
			
    ; ); //查询字符串拼接 string searchparams = DTRequest.GetQueryString("jsonstring"); fooddetail mo ...
    
			
    8. 
						
  8. Django学习笔记之Django Form表单详解
			
    知识预览 构建一个表单 在Django 中构建一个表单 Django Form 类详解 使用表单模板 回到顶部 构建一个表单 假设你想在你的网站上创建一个简单的表单,以获得用户的名字.你需要类似这样的 ...
    
			
    9. 
						
  9. MVC通过服务端对数据进行验证（和AJAX验证一样）
			
    在实体类中 添加 Remote属性,指定用某个View下的某个方法进行验证,如下面表示用User控制器中的UserExiting方法验证 public    class   User { [Remot ...
    
			
    10. 
						
  10. 基于tomcat集群做session共享
			
    前端代理服务器nginx:192.168.223.136 tomcat服务器:采用的一台多实例192.168.223.146:8081,192.168.223.146:8082(如何构建多实例tomc ...
    
			
    11.