This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The Range.getBoundingClientRect() method returns a DOMRect object that bounds the contents of the range; this a rectangle enclosing the union of the bounding rectangles for all the elements in the range.
This method is useful for determining the viewport coordinates of the cursor or selection inside a text box. See Element.getBoundingClientRect() for the details on the returned value.
boundingRect = range.getBoundingClientRect()
range = document.createRange();
range.selectNode(document.getElementsByTagName("div").item(0));
rect = range.getBoundingClientRect();
| Specification | Status | Comment |
|---|---|---|
| CSS Object Model (CSSOM) View Module The definition of 'Range.getBoundingClientRect()' in that specification. | Working Draft | Initial specification. |
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | (Yes) | (Yes) | 4.0 (2.0) | 9.0 | 15.0 | ? |
| Feature | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support | (Yes) | (Yes) | 4.0 (2.0) | No support | 15.0 | ? |
Range.getClientRects() - finer-grained result for non-rectangular ranges (e.g. when the selection wraps onto the next line);Element.getBoundingClientRect()Document.caretPositionFromPoint() - to get the (node, offset) from viewport coordinates.
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Range/getBoundingClientRect