Web/API/DOMRect

Draft This page is not complete.

A DOMRect describes the size and position of a rectangle.

The type of box represented by the DOMRect is specified by the method or property that returned it. For example, VREyeParameters.renderRect from the WebVR API specifies the viewport of a canvas into which visuals for one eye of a head mounted display should be rendered.

It inherits from its parent, DOMRectReadOnly.

  <div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveAspectRatio="xMinYMin meet"><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/DOMRectReadOnly" target="_top"><rect x="1" y="1" width="150" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="76" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">DOMRectReadOnly</text></a><polyline points="151,25  161,20  161,30  151,25" stroke="#D4DDE4" fill="none"/><line x1="161" y1="25" x2="191" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/DOMRect" target="_top"><rect x="191" y="1" width="75" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text  x="228.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">DOMRect</text></a></svg></div>

  a:hover text { fill: #0095DD; pointer-events: all;}

Constructor

DOMRect(): Creates a new DOMRect object.

Properties

DOMRect inherits properties from its parent, DOMRectReadOnly. The difference is that they are not read-only anymore.

DOMRectReadOnly.x: The x coordinate of the DOMRect's origin (typically the top-left corner of the rectangle).
DOMRectReadOnly.y: The y coordinate of the DOMRect's origin (typically the top-left corner of the rectangle).
DOMRectReadOnly.width: The width of the DOMRect.
DOMRectReadOnly.height: The height of the DOMRect.
DOMRectReadOnly.top: Returns the top coordinate value of the DOMRect (has the same value as y, or y + height if height is negative.)
DOMRectReadOnly.right: Returns the right coordinate value of the DOMRect (has the same value as x + width, or x if width is negative.)
DOMRectReadOnly.bottom: Returns the bottom coordinate value of the DOMRect (has the same value as y + height, or y if height is negative.)
DOMRectReadOnly.left: Returns the left coordinate value of the DOMRect (has the same value as x, or x + width if width is negative.)

Methods

DOMRect inherits methods from its parent, DOMRectReadOnly.

Static methods

DOMRectReadOnly.fromRect()

Creates a new DOMRect object with a given location and dimensions.

Specifications

Specification	Status	Comment
Geometry Interfaces Module Level 1The definition of 'DOMRect' in that specification.	Candidate Recommendation	Initial definition.

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`DOMRect`	Chrome Full support 61	Edge Full support 79 Full support 79 Full support 12 Alternate Name' Alternate Name' Uses the non-standard name: `ClientRect`	Firefox Full support Yes	IE No support No No support No Full support Yes Alternate Name' Alternate Name' Uses the non-standard name: `ClientRect`	Opera Full support 48	Safari Full support 10.1	WebView Android Full support 61	Chrome Android Full support 61	Firefox Android Full support Yes	Opera Android Full support 45	Safari iOS Full support 10.3	Samsung Internet Android Full support 8.0
`DOMRect()` constructor	Chrome Full support 61	Edge Full support 79	Firefox Full support 31	IE No support No	Opera Full support 48	Safari Full support 10.1	WebView Android Full support 61	Chrome Android Full support 61	Firefox Android Full support 31	Opera Android Full support 45	Safari iOS Full support 10.3	Samsung Internet Android Full support 8.0
Available in workers	Chrome Full support 61	Edge Full support 79	Firefox Full support 69	IE No support No	Opera Full support 48	Safari Full support 10.1	WebView Android Full support 61	Chrome Android Full support 61	Firefox Android No support No	Opera Android Full support 45	Safari iOS Full support 10.3	Samsung Internet Android Full support 8.0

Legend

Full support: Full support
No support: No support
Uses a non-standard name.': Uses a non-standard name.