自動サイズの要素の幅を見つける

Question

基本的に私はスパンの幅が必要です。キーボードで見つからない複数のカスタム文字を使用する必要があるかどうか私は "div"を使って自分の "input"フィールドを構築しています。各キャラクターは、イベントリスナーが添付された「スパン」タグにラップされます。これにより、ユーザーは文字列内の任意の場所をクリックし、カーソルを文字の後の位置に移動させることができます。文字列の途中で文字を追加または削除することもできます。

"offsetLeft"と "offsetWidth"を使用して文字の右側を検索していますが、文字/スパンをクリックして "offsetWidth"をオフにすると問題が発生します。例えば、私が14ピクセルのフォントを使用している場合、実際には11ピクセルのときに "M"は35ピクセル幅として返されます。そして、いくつかのバリエーションがあります。「S」のような平均サイズの文字は、実際には9ピクセルで26ピクセルに戻ります。したがって、サイジングにはバリエーションがあります。さて、あなたは実際の文字サイズを見つけたのか、それがファイヤーバグを使っているのか疑問に思います。もしFirebugがそれを見つけることができれば、私はそうすることができると思います。だから、ここの誰かが知っていればいいと思う

また、「getComputedStyle」と「currentStyle」を使って幅を探して、「auto」を返しています。また、getBoundingClientRect（）を試してみました。offsetWidthと同じ幅です。幅なので、「M」は奇数、35.366668701171875ピクセルの幅である

EDIT：。

user1289347ポストに基づいて、私は「offsetWidthは」「offsetLeftは」誤った量だけオフに引き起こすことを指摘している必要があります

Answer 1

jquery width（）を試してみると、私が使ったたびにdomの幅がうまく計算されます。http://api.jquery.com/width/

とjQueryが質問

次のスタイルでスタイルDIVを作成して外の場合。 JavaScriptでは、測定しようとしているフォントのサイズと属性を設定し、文字列をDIVに入れてから、DIVの現在の幅と高さを読み取ります。内容に合わせてストレッチされ、サイズはレンダリングされた文字列の数ピクセル以内になります。

HTML：

<div id="Test"> 
abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</div> 

CSS：

#Test 
{ 
    position: absolute; 
    visibility: hidden; 
    height: auto; 
    width: auto; 
} 

のJavaScript（フラグメント）：

var test = document.getElementById("Test"); 
test.style.fontSize = fontSize; 
var height = (test.clientHeight + 1) + "px"; 
var width = (test.clientWidth + 1) + "px"; 

これは、あなたのテストで別々のテスト可能なdiv要素を作成します、信用ここCalculate text width with JavaScriptにです多くの作業が必要ですが、既存のマークアップの外で操作すると、より良い結果が得られるはずです。