jquery获取元素中文本的长度

jquery获取元素中文本的长度:
在通常情况下,我们计算的都是元素的长度,不过也有计算一行文字的需求,下面介绍如何实现使用jquery实现此效果。
代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css"> 
#ruler 
{ 
  white-space:nowrap; 
  font-size:24px; 
} 
</style> 
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  String.prototype.visualLength=function(){ 
    var ruler=$("#ruler"); 
    ruler.text(this); 
    return ruler[0].offsetWidth; 
  } 
  var text="蚂蚁部落欢迎您"; 
  var len = text.visualLength(); 
  alert(len);
})
</script>
</head> 
<body> 
<span id="ruler"></span> 
</body>  
</html>

以上代码实现了我们的要求,可以计算出文本的长度,下面简单介绍一下它的实现过程。
一.实现原理:
其实原理很简单,也是通过计算元素的宽度来计算文字的长度的,因为内联元素的宽度是根据内容变化的,可以动态的将文字放入内联元素中,然后再计算这个内联元素的宽度就可以了。
二.代码注释:
1.$(document).ready(function(){}),当文档结构完全加载完毕再去执行函数中的代码。
2.String.prototype.visualLength=function(){},为字符串对象实例添加函数visualLength。
3.var ruler=$("#ruler"),获取元素对象。
4.ruler.text(this),将字符串写入元素中。
5.return ruler[0].offsetWidth,返回包含字符串的元素的宽度。
6.var text="蚂蚁部落欢迎您",要测量长度的字符串。

更多内容可以参阅:http://www.softwhy.com/


你可能感兴趣的:(jquery获取元素中文本的长度)