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

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>

サポート状況

ChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
61+ 31+ 10+×× 48+ 10.0+×
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月24日 (火)
コンテンツを公開しました。