Наши волонтёры ещё не перевели данную статью на Русский. Присоединяйтесь к нам и помогите сделать эту работу!
Вы можете также прочитать эту статью на English (US).
Draft
This page is not complete.
This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
A DOMRect
represents 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. DOMRectReadOnly.y
- The y coordinate of the
DOMRect
's origin. 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 asy
, ory + height
ifheight
is negative.) DOMRectReadOnly.right
- Returns the right coordinate value of the
DOMRect
(has the same value asx + width
, orx
ifwidth
is negative.) DOMRectReadOnly.bottom
- Returns the bottom coordinate value of the
DOMRect
(has the same value asy + height
, ory
ifheight
is negative.) DOMRectReadOnly.left
- Returns the left coordinate value of the
DOMRect
(has the same value asx
, orx + width
ifwidth
is negative.)
Methods
DOMRect
inherits methods from its parent, DOMRectReadOnly
.
DOMRectReadOnly.fromRect()
- Creates a new
DOMRect
object with a given location and dimensions.
Specifications
Specification | Status | Comment |
---|---|---|
Geometry Interfaces Module Level 1 The definition of 'DOMRect' in that specification. |
Candidate Recommendation | Initial definition. |
Browser compatibility
Desktop | Mobile | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Basic support | Chrome Full support Yes | Edge
No support
No
| Firefox Full support Yes | IE
No support
No
| Opera Full support Yes | Safari Full support 10.1 | WebView Android Full support Yes | Chrome Android Full support Yes | Edge Mobile
No support
No
| Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support 10.1 | Samsung Internet Android ? |
DOMRect() constructor | Chrome Full support Yes | Edge No support No | Firefox Full support Yes | IE No support No | Opera Full support Yes | Safari Full support 10.1 | WebView Android Full support Yes | Chrome Android Full support Yes | Edge Mobile No support No | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support 10.1 | Samsung Internet Android ? |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown
- Uses a non-standard name.
- Uses a non-standard name.