ワードスペース幅をピクセル単位で取得する

Question

単語間の1つのスペースの幅をピクセル単位で調べる方法については固まっています。たとえば、文章が："The quick brown fox jumps over the lazy dog."で、空白のピクセル単位の幅（すべて同じ）が必要な場合は、使用できる式がありますか？これは、多くの異なるフォントファミリおよびサイズにわたって使用可能でなければなりません。

私は以下のサンプルのようなCSSワード-spacingプロパティを使用して幅を設定することもできますが、私はセットそれにしたくないことを見て、私は値を取得したいです。また、空白をトリミングするのではなく、スペースの量を計算して合計幅を追加するだけです。

p { 
    word-spacing: 5px; 
} 

ありがとうございます！

あなたは、単にその単語間隔のスタイルが指定されている場合、ID =「ID」を持つ特定の要素の単語間隔値を返すために、この使用してJavaScriptを行うことができます

Answer 1

：ここ

document.getElementById("id").style.wordSpacing; 

は一例です： https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_style_wordspacing3

Answer 2

word-spacingがCSSで設定されている場合は、window.getComputedStyleを使用する必要があります。

var ws = document.querySelector('#ws'); 
 
var p = document.querySelector('p'); 
 
var style = window.getComputedStyle(p); 
 
ws.textContent = style.wordSpacing;

p { 
 
    word-spacing: 5px; 
 
}

<p>The quick brown fox jumped over the lazy dog</p> 
 
<div>The word spacing above is: <b id="ws">0px</b></div>

Answer 3

この方法は私のために働くことになりました。基本的には、要素全体をキャンバスにして、font-size/font-familyのプロパティ値と必要なテキスト（スペース）を接続する必要がありました。次に、measureText()を使用してスペースの幅を調べることができました。 https://www.w3schools.com/tags/canvas_measuretext.asp