Metin düğümleri için getBoundingClientRect() öğesine eşdeğer var mı?

Question

Bir metin düğümünün sınırlayıcı rimini elde etmenin bir yolu var mı?

getBoundingClientRect() yöntemi yalnızca öğeler üzerinde tanımlanmıştır ve ana öğe, daha sonra gerçek metin düğümünden daha büyüktür.

Answer 1

Metin düğümünü <span>'da sarın, bu açıklığın boundingRect numaralı sürümünü edinin. Eğer IE8 veya daha büyük desteklemek için gerekmiyorsa

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

Answer 2

, bir Rangeselect the text node için kullanmak ve sonra Range doğrudan sınırlayıcı rect alabilirsiniz.

Örnek (bu sayfadaki çalışması gerekir):

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 

Ayrıca çoklu metin düğümleri için yapıyorsan Range nesneyi yeniden kullanabilirsiniz; Bitene kadar range.detach()'u aramamaya dikkat edin. (Not: Range.detach(), the DOM standard numaralı telefonun bir no-op'udur, ancak daha eski tarayıcılar, çağrılmasının ardından aralığın kullanımını yine de devre dışı bırakacaktır.)