DOMRect() - コンストラクタ
DOMRect()は、DOMRectのコンストラクタです。新しいオブジェクトを作成します。
概要
- 名前
- DOMRect
- 所属
- DOMRect
- IDL
Constructor(optional unrestricted double x = 0, optional unrestricted double y = 0, optional unrestricted double width = 0, optional unrestricted double height = 0)
- 仕様書
- https://drafts.fxtf.org/geometry-1/#dom-domrect-domrect
説明
各引数は省略できます。省略した場合は0となります。
第1引数(x)には、水平方向の位置を指定します。
第2引数(y)には、垂直方向の位置を指定します。
第3引数(width)には、横幅を指定します。
第4引数(height)には、高さを指定します。
チュートリアル
コンストラクタでDOMRectを作成する例です。
var domRect = new DOMRect( 10, 20, 30, 40 ) ;
デモ
DOMRect()のデモです。
<!-- このコードは編集できます。 -->
<!DOCTYPE html>
<head>
<style>
body { word-break: break-all ; tab-size: 2 ; }
div#result { white-space: pre-wrap ; }
</style>
</head>
<body>
<div id="hoge">SYNCER</div>
<hr>
<div id="result"></div>
<script>
var domRect = new DOMRect( 1, 2, 3, 4 ) ;
console.log( domRect ) ;
appendText( domRect + "\n" ) ;
appendText( "\t" + "x: " + domRect.x + "\n" ) ;
appendText( "\t" + "y: " + domRect.y + "\n" ) ;
appendText( "\t" + "width: " + domRect.width + "\n" ) ;
appendText( "\t" + "height: " + domRect.height + "\n" ) ;
function appendText ( text ) {
document.getElementById( "result" ).appendChild( document.createTextNode( text ) ) ;
}
</script>
</body>
</html>
サポート状況
Chrome | Firefox | Safari | Edge | IE | Opera | iOS Safari | Android |
---|---|---|---|---|---|---|---|
● 61+ | ● 31+ | ● 10+ | × | × | ● 48+ | ● 10.0+ | × |
関連記事
- DOMRect
- DOMRectは、矩形を管理するための機能を備えたインターフェイスです。
- DOMRect.fromRect()
- fromRect()は、DOMRectのメソッドです。新しい矩形を作成します。コンストラクタと似ていますが、こちらは引数に他のDOMRectを指定すると、それを複製できます。
- DOMRect.y
- yは、DOMRectのプロパティです。矩形の垂直方向の位置を返します。垂直方向の位置は、ドキュメントの上端からの距離です。
- DOMRect.x
- xは、DOMRectのプロパティです。矩形の水平方向の位置を返します。水平方向の位置は、ドキュメントの左端からの距離です。