CODEWITHSUNDEEP
javascripthtmlgetboundingclientrectselection-api
undercover grill
undercover grill

Reputation: 31

Differences in Selection Api getClientRects and getBoundingClientRect

When using the Selection Api, pseudo elements are sometimes not included in resulted getClientRects. As, @Kaiido has mentioned, Range#getClientRects() can sometimes only include selectable text.

This results in only selectable text being included.

var range = document.createRange();
range.selectNodeContents(e.target);
bounds = range.getBoundingClientRect();

Calling e.target.getBoundingClientRect() will included the entire elements box.

How can I retrieve a "selectable text" bbox similar to the Selection Api.

range.selectNodeContents(e.target);
bounds = range.getBoundingClientRect();

I'd like to avoid var styles = window.getComputedStyle(element,':after') if possible.

I also tried offsetWidth ect... but this also includes the pseudo element.

Upvotes: 1

Views: 322

Answers (0)

Related Questions