jquery獲取元素中文字的長度

admin發表於2017-03-06
jQuery

通常情況下，計算的都是元素的長度，不過也有計算一行文字的需求，下面介紹如何實現使用jquery實現此效果。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!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="螞蟻部落歡迎您"，要測量長度的字串。

相關文章