是否有與文本節點的getBoundingClientRect（）等價的東西？

Question

有沒有辦法獲得文本節點的邊界矩形？

getBoundingClientRect（）方法僅在元素上定義，父元素大於實際文本節點。

Answer 1

將文本節點包裝在<span>中，獲取該跨度的boundingRect。

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

Answer 2

如果您不需要支持IE8或以上，你可以使用一個Range來select the text node，然後從Range得到邊界RECT直接。

例（應在這一頁的工作）：

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()，直到完成。 （注意：Range.detach()現在不在the DOM standard中，儘管舊版瀏覽器在調用之後仍然會禁用該範圍。）