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.
The getClientRects() method of the Element
interface returns a collection of DOMRect objects that indicate the
bounding rectangles for each CSS border box in a client.
Most elements only have one border box each, but a multiline inline-level element (such as a multiline
element, by default) has a border box around each line.
Syntax
getClientRects()
Parameters
None.
Return value
The returned value is a collection of DOMRect objects, one for each CSS
border box associated with the element. Each DOMRect object describes the border box, in pixels, with the top-left
relative to the top-left of the viewport. For tables with captions, the caption is
included even though it's outside the border box of the table. When called on SVG
elements other than an outer-, the "viewport" that the resulting
rectangles are relative to is the viewport that the element's
outer- establishes (and to be clear, the rectangles are also
transformed by the outer-'s viewBox transform, if
any).
The amount of scrolling that has been done of the viewport area (or any other scrollable element) is taken into account when computing the rectangles.
The returned rectangles do not include the bounds of any child elements that might happen to overflow.
For HTML elements, SVG elements that do not render anything
themselves, display:none elements, and generally any elements that are not
directly rendered, an empty list is returned.
Rectangles are returned even for CSS boxes that have empty border-boxes. The
left, top, right, and bottom
coordinates can still be meaningful.
Fractional pixel offsets are possible.
Examples
These examples draw client rects in various colors. Note that the JavaScript function
that paints the client rects is connected to the markup via the class
withClientRectsOverlay.
HTML
Example 1: This HTML creates three paragraphs with a
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.
Paragraph that spans multiple lines
Paragraph that spans multiple lines
Paragraph that spans multiple lines
Example 2: This HTML creates three ordered lists. Client rects are painted for the
Note that the border box doesn't include the number, so neither do the client
rects.
Example 3: This HTML creates two tables with captions. Client rects are painted for the
Although the table's border box doesn't include the caption, the client rects
do include the caption.
The CSS draws borders around the paragraph and the The JavaScript code draws the client rects for all HTML elements that have CSS class
inside,
each embedded in a element in the
third block.
A paragraph with a span inside
element in the third block.A list
in the second block.
A table with a caption
thead
tbody
thead
tbody
CSS
inside
each for the second example, and around
,
, and
elements for the third example.
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
withClientRectsOverlay 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);
}
})();
Result
Specifications
Specification CSSOM View Module
# dom-element-getclientrectsBrowser compatibility
See also