jQuery(js)取得文字幅(表示長)サンプルコード

今日は文字の幅を取得する問題に遭遇して、長い間調べて、やっと1つの国外のウェブサイトの上で方法を見つけて、しかし直接使うことができなくて、そこで修正して、成功してプロジェクトの中で使って、ここでみんなに分かち合います.
まずbodyラベルの最後にサブラベルを追加します.

 
  
test 
  
 
 

次に、対応するcssコードを追加します.

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

次にStringのプロトタイプに文字幅を取得する関数を直接追加し、jsコードに次のコードを追加すればよい.

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

最後に、文字幅を取得する必要がある場所で呼び出せばいいです.例を挙げます.

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

主な考え方は、非表示のラベルを追加し、そのラベルに値を付けるたびに、そのラベルの長さを取得することで文字幅を取得することです.なお、長さは、DOMに追加されたラベルのみが取得される.
もし皆さんが自分に役に立つと思ったら、助けてほしいです.ありがとうございます.