Czy istnieje odpowiednik getBoundingClientRect() dla węzłów tekstowych?

Question

Czy istnieje sposób na uzyskanie prostokąta ograniczającego węzeł tekstowy?

Metoda getBoundingClientRect() jest zdefiniowana tylko dla elementów, a element nadrzędny jest większy niż rzeczywisty węzeł tekstowy.

Answer 1

Owiń węzeł tekstowy w <span>, pobierz boundingRect tego zakresu.

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

Answer 2

Jeśli nie muszą wspierać IE8 lub starsze, można użyć Range do select the text node, a następnie uzyskać obwiedni rect bezpośrednio z Range.

Przykład (powinien działać na tej stronie):

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 

Można również ponownie użyć obiektu Range Jeśli robisz to dla wielu węzłów tekstowych; tylko pamiętaj, aby nie dzwonić pod numer range.detach(), dopóki nie skończysz. (Uwaga: Range.detach() jest obecnie nie-op w the DOM standard, choć starsze przeglądarki będą nadal wyłącza stosowanie zakresie po jego wywołaniu.)