SYNCERのロゴ
アイキャッチ画像

DOMRectReadOnly - 読み取り専用の矩形

DOMRectReadOnlyは、読み取り専用の、矩形を管理するための機能を備えたインターフェイスです。

概要

名前
DOMRectReadOnly
IDL
[Constructor(optional unrestricted double x = 0, optional unrestricted double y = 0, optional unrestricted double width = 0, optional unrestricted double height = 0),
 Exposed=(Window,Worker),
 Serializable]
interface DOMRectReadOnly {
  [NewObject] static DOMRectReadOnly fromRect(optional DOMRectInit other);

  readonly attribute unrestricted double x;
  readonly attribute unrestricted double y;
  readonly attribute unrestricted double width;
  readonly attribute unrestricted double height;
  readonly attribute unrestricted double top;
  readonly attribute unrestricted double right;
  readonly attribute unrestricted double bottom;
  readonly attribute unrestricted double left;

  [Default] object toJSON();
};

dictionary DOMRectInit {
    unrestricted double x = 0;
    unrestricted double y = 0;
    unrestricted double width = 0;
    unrestricted double height = 0;
};
仕様書
https://drafts.fxtf.org/geometry-1/#domrectreadonly

チュートリアル

DOMRectReadOnlyは、コンストラクタのDOMRectReadOnly()で作成できます。

var x = 10 ;
var y = 20 ;
var width = 100 ;
var height = 50 ;

var domRect = new DOMRectReadOnly( x, y, width, height ) ;

また、DOMRectがこのインターフェイスを継承しています。DOMRectはElement.getBoundingClientRect()やRange.getBoundingClientRect()が返します。

var domRect = element.getBoundingClientRect() ;

コンストラクタ

DOMRectReadOnly()

新しいDOMRectReadOnlyのオブジェクトを作成します。

プロパティ

bottom

ドキュメントの上端から矩形の下辺までの距離を返します。

height

矩形の高さを返します。

left

ドキュメントの左端から矩形の左辺までの距離を返します。

right

ドキュメントの左端から矩形の右辺までの距離を返します。

top

ドキュメントの上端から矩形の上辺までの距離を返します。

width

矩形の横幅を返します。

x

矩形の水平方向の位置を返します。

y

矩形の垂直方向の位置を返します。

メソッド

fromRect()

新しい矩形を作成します。

toJSON()

矩形の内容をJSONフォーマットのObjectに変換します。

定数

固有の定数はありません。

イベント

固有のイベントハンドラはありません。

サポート状況

クリックすると、バージョンごとの対応状況を確認できます。

FeaturesChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
DOMRectReadOnly
bottom
DOMRectReadOnly() 61+× 10+×× 48+ 10.0+×
fromRect() 61+× 10+×× 48+ 10.0+×
height 9+
left
right
toJSON() 61+× 10+×× 48+ 10.0+×
top
width 9+
x 61+ 31+ 10+×× 48+ 10.0+×
y 61+ 31+ 10+×× 48+ 10.0+×
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月15日 (日)
コンテンツを公開しました。