DOMRect - Web API 接口参考编辑

草案
本页尚未完工.

一个 DOMRect 代表一个矩形。

DOMRect 表示的盒子的类型由返回它的方法或属性指定。例如，WebVR API 的 VREyeParameters.renderRect 指定了头戴式显示器的一只眼睛应该呈现的影像所在的 canvas 的视口。

它继承自它的父类，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/wiki/zh-CN/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="/wiki/zh-CN/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;}

属性

DOMRect 从其父类 DOMRectReadOnly 继承属性。不同之处在于它们不再是只读的。

DOMRectReadOnly.x: DOMRect 原点的 x 坐标。
DOMRectReadOnly.y: DOMRect 原点的 y 坐标。
DOMRectReadOnly.width: DOMRect 的宽度。
DOMRectReadOnly.height: DOMRect 的高度。
DOMRectReadOnly.top: 返回 DOMRect 的顶坐标值（与 y 具有相同的值，如果 height 为负值，则为 y + height 的值）。
DOMRectReadOnly.right: 返回 DOMRect 的右坐标值（与 x + width 具有相同的值，如果width 为负值，则为 x 的值）。
DOMRectReadOnly.bottom: 返回 DOMRect 的底坐标值（与 y + height 具有相同的值，如果 height 为负值，则为 y 的值）。
DOMRectReadOnly.left: 返回 DOMRect 的左坐标值（与 x 具有相同的值，如果 width 为负值，则为 x + width 的值）。

方法

DOMRect 从它的父类继承方法，DOMRectReadOnly。

静态方法
DOMRectReadOnly.fromRect(): 创建一个具有指定位置和尺寸的新 DOMRect 对象。

规范

Specification	Status	Comment
Geometry Interfaces Module Level 1 DOMRect	Candidate Recommendation	Initial definition.

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.