テキストノードのgetBoundingClientRect（）と同等の機能はありますか？

Question

テキストノードの境界矩形を取得する方法はありますか？

getBoundingClientRect（）メソッドは要素にのみ定義され、親要素は実際のテキストノードよりも大きくなります。

Answer 1

<span>にテキストノードをラップすると、そのスパンのboundingRectが得られます。あなたはIE8歳以上をサポートする必要がない場合

var span = document.createElement('span'); 
textNode.parentNode.insertBefore(span, textNode); 
span.appendChild(textNode); 
var rect = span.getBoundingClientRect(); 

Answer 2

、あなたはselect the text nodeにRangeを使用して、Rangeから直接、境界矩形を取得することができます。

例（このページでは動作するはずです）：

var text = document.getElementById('nav-questions').childNodes[0]; 
var range = document.createRange(); 
range.selectNode(text); 
var rect = range.getBoundingClientRect(); 
range.detach(); // frees up memory in older browsers 

あなたが複数のテキスト・ノードのためにこれをやっている場合にもRangeオブジェクトを再利用することができます。完了するまでrange.detach()に電話しないようにしてください。 （Note：Range.detach()は現在the DOM standardのno-opになっていますが、古いブラウザでは呼び出し後も範囲の使用が無効になります）