jQuery(js)獲取文字寬度(顯示長度)示例代碼
更新時間：2013年12月31日 16:32:49 作者：
今天遇到了獲取文字寬度的問題，在網(wǎng)上找到了不錯的方法并成功使用到了項目中，有類似情況的朋友可以參考下
今天遇到了獲取文字寬度的問題，查了很久，終于在一個國外網(wǎng)站上找到了方法，但是不能直接使用，于是修改了一下，成功使用到了項目中，在這里分享給大家。
首先在body標(biāo)簽最后添加一個子標(biāo)簽：
<span id="ruler">test</span>
然后添加相應(yīng)的css代碼：
#ruler {
visibility: hidden;
white-space: nowrap;
font-size: 24px;
}
接下來直接在String的原型中添加獲取文字寬度的函數(shù)，在js代碼中加入以下代碼即可：
String.prototype.visualLength = function()
{
var ruler = $("#ruler");
ruler.text(this);
return ruler[0].offsetWidth;
}
最后在需要獲取文字寬度的地方調(diào)用即可，舉個例子：
var text = "test";
var len = text.visualLength();
主要思路是添加一個隱藏的標(biāo)簽，每次對該標(biāo)簽賦值后，通過獲取該標(biāo)簽的長度來獲取文字寬度。需要注意的是，只有已經(jīng)被添加到DOM中的標(biāo)簽才能獲取長度。
如果大家覺得對自己有幫助的話，還希望能幫頂一下，謝謝：）
首先在body標(biāo)簽最后添加一個子標(biāo)簽：
復(fù)制代碼 代碼如下:
<span id="ruler">test</span>
然后添加相應(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)用即可，舉個例子：
復(fù)制代碼 代碼如下:
var text = "test";
var len = text.visualLength();
主要思路是添加一個隱藏的標(biāo)簽，每次對該標(biāo)簽賦值后，通過獲取該標(biāo)簽的長度來獲取文字寬度。需要注意的是，只有已經(jīng)被添加到DOM中的標(biāo)簽才能獲取長度。
如果大家覺得對自己有幫助的話，還希望能幫頂一下，謝謝：）
您可能感興趣的文章:
- jQuery實現(xiàn)控制文字內(nèi)容溢出用省略號(…)表示的方法
- JQuery 控制內(nèi)容長度超出規(guī)定長度顯示省略號
- Jquery循環(huán)截取字符串的方法(多出的字符串處理成"...")
- 用jquery實現(xiàn)輸入框獲取焦點消失文字
- jquery xMarquee實現(xiàn)文字水平無縫滾動效果
- jQuery計算textarea中文字?jǐn)?shù)(剩余個數(shù))的小程序
- jQuery實現(xiàn)長文字部分顯示代碼
- input 輸入框獲得/失去焦點時隱藏/顯示文字(jquery版)
- jquery實現(xiàn)微博文字輸入框 輸入時顯示輸入字?jǐn)?shù) 效果實現(xiàn)
- jQuery實現(xiàn)文字超過1行、2行或規(guī)定的行數(shù)時自動加省略號的方法
相關(guān)文章
jQuery Ajax Post 回調(diào)函數(shù)不執(zhí)行問題的解決方法
本文是小編給大家?guī)淼膉Query Ajax Post 回調(diào)函數(shù)不執(zhí)行的原因及解決方法，在本文最下面還給大家附加jquery Ajax 不執(zhí)行回調(diào)函數(shù)success的原因，這兩個問題都非常多見，感興趣的朋友一起看下吧2016-08-08
這篇文章主要為大家詳細(xì)介紹了jQuery版AJAX簡易封裝代碼,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
jQuery 處理網(wǎng)頁內(nèi)容的實現(xiàn)代碼
改變頁面內(nèi)容應(yīng)該算是Javascript最常用的功能，這包括更改已經(jīng)存在的頁面元素或者添加新的HTML元素。2010-02-02
最近遇到個問題，同時引用了jquery庫和另外一個js庫。當(dāng)用$XX去調(diào)用js庫函數(shù)時，發(fā)現(xiàn)失效了！于是找資料，原來是jquery命名沖突了2012-03-03
jQuery在線選座位插件seat-charts特效代碼分享
這篇文章主要介紹了jQuery在線選座位插件seat-charts特效，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
Jquery鼠標(biāo)放上去顯示全名的實現(xiàn)方法
下面小編就為大家?guī)硪黄狫query鼠標(biāo)放上去顯示全名的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
這篇文章主要為大家詳細(xì)介紹了jQuery pagination分頁示例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-10-10
基于jQuery創(chuàng)建鼠標(biāo)懸停效果的方法
這篇文章主要介紹了基于jQuery創(chuàng)建鼠標(biāo)懸停效果的方法,實例分析了jQuery實現(xiàn)鼠標(biāo)特效的原理與詳細(xì)步驟,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
jquery support主要是檢測瀏覽器兼容性，支持力度的方法，用于展示不同瀏覽器各自特性和bug的屬性集合。作為一個靜態(tài)成員，提供給jquery內(nèi)部函數(shù)，告訴他們某些功能是否能用。避免了以往通過檢測瀏覽器版本做修改。下面我們通過源碼詳細(xì)解讀jQ中瀏覽器兼容模塊support。2016-08-08
動態(tài)生成的DOM不會觸發(fā)onclick事件的原因及解決方法
下面小編就為大家?guī)硪黄獎討B(tài)生成的DOM不會觸發(fā)onclick事件的原因及解決方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08