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?

You can get the div position and then you'll have to add any top and left padding and border. — Asken
– Asken, Commented Apr 25, 2013 at 7:52
@user125697: text is a node , not an element. It doesn't duplicate of that question. — benjaminchanming
– benjaminchanming, Commented Apr 25, 2013 at 7:59
@Asken: How to get the padding and border information? I cannot find its padding and border value using the inspector of Chrome. — benjaminchanming
– benjaminchanming, Commented Apr 25, 2013 at 8:03
This is not a duplicate. Finding the position/dimensions of a text node is a different problem from doing the same with an element. — Tim Down
– Tim Down, Commented Apr 26, 2013 at 11:55

Tim Down · Accepted Answer · 2017-10-31 11:06:29Z

37

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>

edited Oct 31, 2017 at 11:06

answered Apr 25, 2013 at 9:21

Tim Down

326k76 gold badges461 silver badges546 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Domezchoc Over a year ago

Is this code work with old browser. if not, what solution for old browser.

Tim Down Over a year ago

@Domezchoc: Which old browsers? There is a solution using TextRange in IE which is easy so long as your text node is the only child of an element. Otherwise, it's still possible but more work to create the TextRange.

Domezchoc Over a year ago

i mean IE, i got it. first i need to find TextRange and then getClientRects. thank

Tim Down Over a year ago

@user984003: The snippet seems to work OK on Safari in iOS 11.

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related