欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2013年12月31日 16:32:49   作者：  
今天遇到了獲取文字寬度的問(wèn)題，在網(wǎng)上找到了不錯(cuò)的方法并成功使用到了項(xiàng)目中，有類(lèi)似情況的朋友可以參考下
今天遇到了獲取文字寬度的問(wèn)題，查了很久，終于在一個(gè)國(guó)外網(wǎng)站上找到了方法，但是不能直接使用，于是修改了一下，成功使用到了項(xiàng)目中，在這里分享給大家。

首先在body標(biāo)簽最后添加一個(gè)子標(biāo)簽：
復(fù)制代碼 代碼如下:

<span id="ruler">test</span>

然后添加相應(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ì)自己有幫助的話(huà)，還希望能幫頂一下，謝謝：）

相關(guān)文章

  • jQuery Ajax Post 回調(diào)函數(shù)不執(zhí)行問(wèn)題的解決方法

    jQuery Ajax Post 回調(diào)函數(shù)不執(zhí)行問(wèn)題的解決方法

    本文是小編給大家?guī)?lái)的jQuery Ajax Post 回調(diào)函數(shù)不執(zhí)行的原因及解決方法，在本文最下面還給大家附加jquery Ajax 不執(zhí)行回調(diào)函數(shù)success的原因，這兩個(gè)問(wèn)題都非常多見(jiàn)，感興趣的朋友一起看下吧
    2016-08-08
  • jQuery版AJAX簡(jiǎn)易封裝代碼

    jQuery版AJAX簡(jiǎn)易封裝代碼

    這篇文章主要為大家詳細(xì)介紹了jQuery版AJAX簡(jiǎn)易封裝代碼,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2016-09-09
  • jQuery 處理網(wǎng)頁(yè)內(nèi)容的實(shí)現(xiàn)代碼

    jQuery 處理網(wǎng)頁(yè)內(nèi)容的實(shí)現(xiàn)代碼

    改變頁(yè)面內(nèi)容應(yīng)該算是Javascript最常用的功能，這包括更改已經(jīng)存在的頁(yè)面元素或者添加新的HTML元素。
    2010-02-02
  • Jquery命名沖突解決的五種方案分享

    Jquery命名沖突解決的五種方案分享

    最近遇到個(gè)問(wèn)題，同時(shí)引用了jquery庫(kù)和另外一個(gè)js庫(kù)。當(dāng)用$XX去調(diào)用js庫(kù)函數(shù)時(shí)，發(fā)現(xiàn)失效了！于是找資料，原來(lái)是jquery命名沖突了
    2012-03-03
  • jQuery在線(xiàn)選座位插件seat-charts特效代碼分享

    jQuery在線(xiàn)選座位插件seat-charts特效代碼分享

    這篇文章主要介紹了jQuery在線(xiàn)選座位插件seat-charts特效，推薦給大家，有需要的小伙伴可以參考下。
    2015-08-08
  • Jquery鼠標(biāo)放上去顯示全名的實(shí)現(xiàn)方法

    Jquery鼠標(biāo)放上去顯示全名的實(shí)現(xiàn)方法

    下面小編就為大家?guī)?lái)一篇Jquery鼠標(biāo)放上去顯示全名的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-02-02
  • jQuery pagination分頁(yè)示例詳解

    jQuery pagination分頁(yè)示例詳解

    這篇文章主要為大家詳細(xì)介紹了jQuery pagination分頁(yè)示例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2018-10-10
  • 基于jQuery創(chuàng)建鼠標(biāo)懸停效果的方法

    基于jQuery創(chuàng)建鼠標(biāo)懸停效果的方法

    這篇文章主要介紹了基于jQuery創(chuàng)建鼠標(biāo)懸停效果的方法,實(shí)例分析了jQuery實(shí)現(xiàn)鼠標(biāo)特效的原理與詳細(xì)步驟,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2015-03-03
  • 源碼解讀jQ中瀏覽器兼容模塊support

    源碼解讀jQ中瀏覽器兼容模塊support

    jquery support主要是檢測(cè)瀏覽器兼容性，支持力度的方法，用于展示不同瀏覽器各自特性和bug的屬性集合。作為一個(gè)靜態(tài)成員，提供給jquery內(nèi)部函數(shù)，告訴他們某些功能是否能用。避免了以往通過(guò)檢測(cè)瀏覽器版本做修改。下面我們通過(guò)源碼詳細(xì)解讀jQ中瀏覽器兼容模塊support。
    2016-08-08
  • 動(dòng)態(tài)生成的DOM不會(huì)觸發(fā)onclick事件的原因及解決方法

    動(dòng)態(tài)生成的DOM不會(huì)觸發(fā)onclick事件的原因及解決方法

    下面小編就為大家?guī)?lái)一篇?jiǎng)討B(tài)生成的DOM不會(huì)觸發(fā)onclick事件的原因及解決方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-08-08

最新評(píng)論