快捷導(dǎo)航

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

更新時(shí)間：2013年12月31日 16:32:49 作者：

今天遇到了獲取文字寬度的問(wèn)題，在網(wǎng)上找到了不錯(cuò)的方法并成功使用到了項(xiàng)目中，有類似情況的朋友可以參考下

今天遇到了獲取文字寬度的問(wèn)題，查了很久，終于在一個(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; 
} 

接下來(lái)直接在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)簽賦值后，通過(guò)獲取該標(biāo)簽的長(zhǎng)度來(lái)獲取文字寬度。需要注意的是，只有已經(jīng)被添加到DOM中的標(biāo)簽才能獲取長(zhǎng)度。

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

您可能感興趣的文章:

相關(guān)文章

基于jquery的simpleValidate簡(jiǎn)易驗(yàn)證插件
簡(jiǎn)易驗(yàn)證插件simpleValidate使用心得，基于JQuery，修改小BUG后能兼容各瀏覽器，附自用版本供下載
2014-01-01
jQuery事件的綁定、觸發(fā)、及監(jiān)聽(tīng)方法簡(jiǎn)單說(shuō)明
這篇文章主要介紹了jQuery事件的綁定、觸發(fā)、及監(jiān)聽(tīng)方法簡(jiǎn)單說(shuō)明,使用jQuery的事件會(huì)使代碼更加簡(jiǎn)單,同時(shí)對(duì)各瀏覽器的兼容性也還不錯(cuò),需要的朋友可以參考下
2016-05-05
jQuery中clone()方法用法實(shí)例
這篇文章主要介紹了jQuery中clone()方法用法,實(shí)例分析了clone()方法的功能、定義及克隆匹配的DOM元素的使用技巧,需要的朋友可以參考下
2015-01-01
Enter回車切換輸入焦點(diǎn)實(shí)現(xiàn)思路與代碼兼容各大瀏覽器
這篇文章主要介紹了Enter回車切換輸入焦點(diǎn)實(shí)現(xiàn)思路與代碼并兼容各大瀏覽器,需要的朋友可以參考下
2014-09-09
JQuery的Ajax請(qǐng)求實(shí)現(xiàn)局部刷新的簡(jiǎn)單實(shí)例
本篇文章只要是對(duì)JQuery的Ajax請(qǐng)求實(shí)現(xiàn)局部刷新的簡(jiǎn)單實(shí)例進(jìn)行了詳細(xì)的介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2014-02-02
jquery實(shí)現(xiàn)簡(jiǎn)單易懂的圖片展示小例子
圖片展示想必大家都見(jiàn)到過(guò)吧，下面有個(gè)不錯(cuò)的例子，通俗易懂，使用jquery實(shí)現(xiàn)的，感興趣的朋友不要錯(cuò)過(guò)
2013-11-11
jQuery UI實(shí)現(xiàn)動(dòng)畫(huà)效果代碼分享
這篇文章給大家總結(jié)了jQuery UI實(shí)現(xiàn)動(dòng)畫(huà)效果的實(shí)例代碼，有需要的朋友們可以參考測(cè)試下。
2018-08-08
jQuery中:lt選擇器用法實(shí)例
這篇文章主要介紹了jQuery中:lt選擇器用法,實(shí)例分析了:lt選擇器的功能、定義及匹配小于指定索引值元素的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2014-12-12
jQuery表單獲取和失去焦點(diǎn)輸入框提示效果的實(shí)例代碼
這篇文章介紹了jQuery表單獲取和失去焦點(diǎn)輸入框提示效果的實(shí)例代碼，有需要的朋友可以參考一下
2013-08-08
jquery實(shí)現(xiàn)簡(jiǎn)單的輪換出現(xiàn)效果實(shí)例
這篇文章主要介紹了jquery實(shí)現(xiàn)簡(jiǎn)單的輪換出現(xiàn)效果,涉及jquery針對(duì)圖片樣式切換效果的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-07-07