Existe-t-il un équivalent à getBoundingClientRect() pour les nœuds de texte?

Question

Existe-t-il un moyen d'obtenir le rectangle de délimitation d'un nœud de texte?

La méthode getBoundingClientRect() est définie sur les éléments uniquement et l'élément parent est plus grand que le nœud de texte réel.

Answer 1

Enveloppez le nœud de texte dans un <span>, obtenez le boundingRect de cet intervalle.

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

Answer 2

Si vous n'avez pas besoin de soutenir IE8 ou plus, vous pouvez utiliser un Range à select the text node, puis obtenir le bondissant rect directement à partir du Range.

Exemple (devrait fonctionner dans cette page):

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 

Vous pouvez également réutiliser l'objet Range si vous faites cela pour les nœuds de texte multiples; Assurez-vous de ne pas appeler le range.detach() jusqu'à ce que vous ayez terminé. (Note: Range.detach() est désormais un no-op dans the DOM standard, bien que les anciens navigateurs désactiveront toujours l'utilisation de la plage après son invocation.)