How to get the position and size of a HTML text node using javascript?

Question

For Example,

<div style="width:100px;text-align:center">text</div>

I want to get the position and size of the text text node , not its div wrapper. Is it possible?

Answer 1

In modern browsers (recent-ish Mozilla, WebKit and Opera) you can use the getClientRects() method of a DOM range that encompasses the text node.

var textNode = document.getElementById("wombat").firstChild;
var range = document.createRange();
range.selectNodeContents(textNode);
var rects = range.getClientRects();
if (rects.length > 0) {
    console.log("Text node rect: ", rects[0]);
}

<div id="wombat">Wombat</div>