DOMRectList: length property
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
The read-only length
property of the DOMRectList
interface returns the number of DOMRect
objects in the list.
Value
A positive integer representing the count of DOMRect
objects in the DOMRectList
. If there are no rectangles in the list, length
is 0
.
Examples
In the following example, we retrieve the list of rectangles for a <div>
element using Element.getClientRects()
. We then display the number of rectangles in the list within another <div>
element on the page.
First, the HTML:
html
<div id="box" style="width: 50px; height: 20px; border: 1px solid black;"></div>
<div id="output"></div>
Now the JavaScript:
js
const box = document.getElementById("box");
const rects = box.getClientRects();
const output = document.getElementById("output");
output.textContent = `Number of rectangles: ${rects.length}`;
The output looks like this:
Specifications
Specification |
---|
Geometry Interfaces Module Level 1 # dom-domrectlist-length |
Browser compatibility
BCD tables only load in the browser