Element: getClientRects() method

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2015⁩.

ThegetClientRects() method of theElementinterface returns a collection ofDOMRect objects that indicate thebounding rectangles for eachCSS border box in a client.

Most elements only have one border box each, but a multilineinline-level element (such as a multiline<span> element, by default) has a border box around each line.

The returned value is a collection ofDOMRect objects, one for each CSSborder box associated with the element. EachDOMRect object describes the border box, in pixels, with the top-leftrelative to the top-left of the viewport. For tables with captions, the caption isincluded even though it's outside the border box of the table. When called on SVGelements other than an outer-<svg>, the "viewport" that the resultingrectangles are relative to is the viewport that the element'souter-<svg> establishes (and to be clear, the rectangles are alsotransformed by the outer-<svg>'sviewBox transform, ifany).

The amount of scrolling that has been done of the viewport area (or any otherscrollable element) is taken into account when computing the rectangles.

The returned rectangles do not include the bounds of any child elements that mighthappen to overflow.

For HTML<area> elements, SVG elements that do not render anythingthemselves,display:none elements, and generally any elements that are notdirectly rendered, an empty list is returned.

Rectangles are returned even for CSS boxes that have empty border-boxes. Theleft,top,right, andbottomcoordinates can still be meaningful.

Fractional pixel offsets are possible.

Examples

These examples draw client rects in various colors. Note that the JavaScript functionthat paints the client rects is connected to the markup via the classwithClientRectsOverlay.

HTML

Example 1: This HTML creates three paragraphs with a<span> inside,each embedded in a<div> block. Client rects are painted for theparagraph in the second block, and for the<span> element in thethird block.

html

<h3>A paragraph with a span inside</h3><p>  Both the span and the paragraph have a border set. The client rects are in  red. Note that the p has only one border box, while the span has multiple  border boxes.</p><div>  <strong>Original</strong>  <p>    <span>Paragraph that spans multiple lines</span>  </p></div><div>  <strong>p's rect</strong>  <p>    <span>Paragraph that spans multiple lines</span>  </p></div><div>  <strong>span's rect</strong>  <p>    <span      >Paragraph that spans multiple lines</span    >  </p></div>

Example 2: This HTML creates three ordered lists. Client rects are painted for the<ol> in the second block, and for each<li>element in the third block.

html

<h3>A list</h3><p>  Note that the border box doesn't include the number, so neither do the client  rects.</p><div>  <strong>Original</strong>  <ol>    <li>Item 1</li>    <li>Item 2</li>  </ol></div><div>  <strong>ol's rect</strong>  <ol>    <li>Item 1</li>    <li>Item 2</li>  </ol></div><div>  <strong>each li's rect</strong>  <ol>    <li>Item 1</li>    <li>Item 2</li>  </ol></div>

Example 3: This HTML creates two tables with captions. Client rects are painted for the<table> in the second block.

html

<h3>A table with a caption</h3><p>  Although the table's border box doesn't include the caption, the client rects  do include the caption.</p><div>  <strong>Original</strong>  <table>    <caption>      caption    </caption>    <thead>      <tr>        <th>thead</th>      </tr>    </thead>    <tbody>      <tr>        <td>tbody</td>      </tr>    </tbody>  </table></div><div>  <strong>table's rect</strong>  <table>    <caption>      caption    </caption>    <thead>      <tr>        <th>thead</th>      </tr>    </thead>    <tbody>      <tr>        <td>tbody</td>      </tr>    </tbody>  </table></div>

CSS

The CSS draws borders around the paragraph and the<span> insideeach<div> block for the first example, around the<ol> and<li> for the second example, and around<table>,<th>, and<td>elements for the third example.

css

strong {  text-align: center;}div {  display: inline-block;  width: 150px;}div p,ol,table {  border: 1px solid blue;}span,li,th,td {  border: 1px solid green;}

JavaScript

The JavaScript code draws the client rects for all HTML elements that have CSS classwithClientRectsOverlay assigned.

function addClientRectsOverlay(elt) {  /* Absolutely position a div over each client rect so that its border width     is the same as the rectangle's width.     Note: the overlays will be out of place if the user resizes or zooms. */  const rects = elt.getClientRects();  for (const rect of rects) {    const tableRectDiv = document.createElement("div");    tableRectDiv.style.position = "absolute";    tableRectDiv.style.border = "1px solid red";    const scrollTop =      document.documentElement.scrollTop || document.body.scrollTop;    const scrollLeft =      document.documentElement.scrollLeft || document.body.scrollLeft;    tableRectDiv.style.margin = tableRectDiv.style.padding = "0";    tableRectDiv.style.top = `${rect.top + scrollTop}px`;    tableRectDiv.style.left = `${rect.left + scrollLeft}px`;    // We want rect.width to be the border width, so content width is 2px less.    tableRectDiv.style.width = `${rect.width - 2}px`;    tableRectDiv.style.height = `${rect.height - 2}px`;    document.body.appendChild(tableRectDiv);  }}(() => {  /* Call function addClientRectsOverlay(elt) for all elements with     assigned class "withClientRectsOverlay" */  const elems = document.getElementsByClassName("withClientRectsOverlay");  for (const elem of elems) {    addClientRectsOverlay(elem);  }})();