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

Range.getBoundingClientRect() - 全体の矩形を取得する

getBoundingClientRect()は、Rangeのメソッドです。範囲全体を最小限で取り囲む矩形を取得します。

概要

名前
getBoundingClientRect
所属
Range
IDL
[NewObject] DOMRect getBoundingClientRect();
仕様書
https://drafts.csswg.org/cssom-view/#dom-range-getboundingclientrect

説明

引数はありません。

返り値はDOMRectです。

デモ

Range.getBoundingClientRect()のデモです。選択範囲をRangeで表現したオブジェクトにメソッドを実行します。選択範囲を最小限で取り囲む矩形を取得できるのを確認して下さい。分かりやすいように、3秒待つとスタイルシートで矩形に赤枠を表示します。赤枠を消すには、選択範囲を解除して3秒待って下さい。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<head>
<style>
body { word-break: break-all ; tab-size: 2 ; }
div#result { white-space: pre-wrap ; }
.dom-rect { position: absolute ; border: 1px solid red ; }
</style>
</head>
<body>
<div>
<p>1234567890<br>
ABCDEFGHIJKLMN<br>
あいうえおかきくけこさしすせそ<br>
アイウエオカキクケコサシスセソタチツテト</p>
</div>
<hr>
<div id="result"></div>
<script>
document.onselectionchange = function () {
	document.getElementById( "result" ).textContent = "" ;

	var selection = getSelection() ;
	var range = selection.getRangeAt(0) ;
	console.log( range ) ;

	var domRect = range.getBoundingClientRect() ;
	console.log( domRect ) ;

	appendText( "getBoundingClientRect(): " + domRect + "\n" ) ;

	appendText( "\t\t" + "x: " + domRect.x + "\n" ) ;
	appendText( "\t\t" + "y: " + domRect.y + "\n" ) ;
	appendText( "\t\t" + "width: " + domRect.width + "\n" ) ;
	appendText( "\t\t" + "height: " + domRect.height + "\n" ) ;
	appendText( "\t\t" + "top: " + domRect.top + "\n" ) ;
	appendText( "\t\t" + "right: " + domRect.right + "\n" ) ;
	appendText( "\t\t" + "bottom: " + domRect.bottom + "\n" ) ;
	appendText( "\t\t" + "left: " + domRect.left + "\n" ) ;

	setTimeout( function () {
		createDOMRectElement( domRect ) ;
	}, 3000 ) ;
}

function appendText ( text ) {
	document.getElementById( "result" ).appendChild( document.createTextNode( text ) ) ;
}

function createDOMRectElement ( domRect ) {
	var domRectElements = document.getElementsByClassName( "dom-rect" ) ;

	for( var i=0,l=domRectElements.length; l>i; i++ ) {
		domRectElements[0].parentNode.removeChild( domRectElements[0] ) ;
	}

	var domRectElement = document.createElement( "div" ) ;
	domRectElement.className = "dom-rect" ;
	domRectElement.style.left = (domRect.x - 1) + "px" ;
	domRectElement.style.top = (domRect.y - 1) + "px" ;
	domRectElement.style.width = domRect.width + "px" ;
	domRectElement.style.height = domRect.height + "px" ;
	document.body.appendChild( domRectElement ) ;
}
</script>
</body>
</html>

サポート状況

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