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.
Syntax
boundingRect = range.getBoundingClientRect()
Example
range = document.createRange(); range.selectNode(document.getElementsByTagName("div").item(0)); rect = range.getBoundingClientRect();
Specification
Specification | Status | Comment |
---|---|---|
CSS Object Model (CSSOM) View Module The definition of 'Range.getBoundingClientRect()' in that specification. |
Working Draft | Initial specification. |
Browser compatibility
We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
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 | ? |
See also
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.