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 is 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 details on the returned value.


boundingRect = range.getBoundingClientRect()



<div id="highlight"></div>
<p>This example positions a "highlight" rectangle behind the contents of a range. The range's content <b>starts here</b> and continues on until it <b>ends here</b>. The bounding client rectangle contains everything selected in the range.</p>


#highlight {
  background: yellow;
  position: absolute;
  z-index: -1;

p {
  width: 200px;


const range = document.createRange();
range.setStartBefore(document.getElementsByTagName('b').item(0), 0);
range.setEndAfter(document.getElementsByTagName('b').item(1), 0);

const clientRect = range.getBoundingClientRect();
const highlight = document.getElementById('highlight');
highlight.style.left = `${clientRect.x}px`;
highlight.style.top = `${clientRect.y}px`;
highlight.style.width = `${clientRect.width}px`;
highlight.style.height = `${clientRect.height}px`;



Specification Status Comment
CSS Object Model (CSSOM) View Module
The definition of 'Range.getBoundingClientRect()' in that specification.
Working Draft Initial specification.

Browser compatibility

Update compatibility data on GitHub
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Chrome Full support YesEdge Full support 12Firefox Full support 4IE Full support 9Opera Full support 15Safari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support 14Safari iOS Full support YesSamsung Internet Android Full support Yes


Full support  
Full support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.

See also