Differences in Selection Api getClientRects and getBoundingClientRect

203 Views Asked by At

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.

0

There are 0 best solutions below