方法： 做一个空的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. jQuery中on()方法用法实例
			
    这篇文章主要介绍了jQuery中on()方法用法,实例分析了on()方法的功能.定义及在匹配元素上绑定一个或者多个事件处理函数的使用技巧,需要的朋友可以参考下 本文实例讲述了jQuery中on()方法 ...
    
			
    2. 
						
  2. js老生常谈之this,constructor ,prototype
			
    前言 javascript中的this,constructor ,prototype,都是老生常谈的问题,深入理解他们的含义至关重要.在这里,我们再来复习一下吧,温故而知新! this this表示当 ...
    
			
    3. 
						
  3. vue的项目结构
			
    一. 准备工作 1. 初始化项目    vue init webpack itany    cd itany    cnpm install    cnpm install less less-loa ...
    
			
    4. 
						
  4. hdu6206 Apple
			
    地址:http://acm.split.hdu.edu.cn/showproblem.php?pid=6206 题目: Apple Time Limit: 1000/1000 MS (Java/Oth ...
    
			
    5. 
						
  5. 使用IDEA 创建Servlet  的时候，找不到javax.servlet
			
    使用IDEA 开发工具,创建Servlet 文件的时候,出现了下面的这种错误, 解决步骤如下: 第一步:点击 File 第二步:找到Project Structure,点击,然后按照下图顺序操作,添加 ...
    
			
    6. 
						
  6. 第三方库(JSONModel)出现file not found
			
    http://stackoverflow.com/questions/5198905/h-file-not-found 具体方法: 在导航栏中 点击 Product --> Clean 成功之后 ...
    
			
    7. 
						
  7. Could not connect to '192.168.89.144' (port 22)
			
    xshell连接linux主机时,会出现错误:Could not connect to '192.168.89.144' (port 22): Connection failed. 但是这时能ping ...
    
			
    8. 
						
  8. Django学习笔记之Models与ORM操作
			
    一.ORM增加 from django.db import models class Publisher(models.Model): name = models.CharField(max_leng ...
    
			
    9. 
						
  9. 20145329 《Java程序设计》第九周学习总结
			
    教材学习内容总结 十六章 1.Metadata即"诠读数据的数据",数据库是用来存储数据的地方,然而数据库本身产品名称为何?数据库中有几个数据表格?表格名称为何?表格中有几个字段等 ...
    
			
    10. 
						
  10. 简单的Java网络爬虫（获取一个网页中的邮箱）
			
    import java.io.BufferedReader; import java.io.FileNotFoundException; import java.io.FileReader; impo ...
    
			
    11.