jQuery(js)獲取文字寬度(顯示長(zhǎng)度)示例代碼

2019-11-20 21:20:21

字體：大中小

供稿：網(wǎng)友

今天遇到了獲取文字寬度的問題，查了很久，終于在一個(gè)國(guó)外網(wǎng)站上找到了方法，但是不能直接使用，于是修改了一下，成功使用到了項(xiàng)目中，在這里分享給大家。

首先在body標(biāo)簽最后添加一個(gè)子標(biāo)簽：

復(fù)制代碼代碼如下:

然后添加相應(yīng)的css代碼：

復(fù)制代碼代碼如下:

 
#ruler { 
visibility: hidden; 
white-space: nowrap; 
font-size: 24px; 
} 

接下來直接在String的原型中添加獲取文字寬度的函數(shù)，在js代碼中加入以下代碼即可：

復(fù)制代碼代碼如下:

 
String.prototype.visualLength = function() 
{ 
var ruler = $("#ruler"); 
ruler.text(this); 
return ruler[0].offsetWidth; 
} 

最后在需要獲取文字寬度的地方調(diào)用即可，舉個(gè)例子：

復(fù)制代碼代碼如下:

 
var text = "test"; 
var len = text.visualLength(); 

主要思路是添加一個(gè)隱藏的標(biāo)簽，每次對(duì)該標(biāo)簽賦值后，通過獲取該標(biāo)簽的長(zhǎng)度來獲取文字寬度。需要注意的是，只有已經(jīng)被添加到DOM中的標(biāo)簽才能獲取長(zhǎng)度。

如果大家覺得對(duì)自己有幫助的話，還希望能幫頂一下，謝謝：）

上一篇：js/jQuery簡(jiǎn)單實(shí)現(xiàn)選項(xiàng)卡功能

下一篇：js判斷字符長(zhǎng)度以及中英文數(shù)字等