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

2017/10/17

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

概要

名前

getBoundingClientRect

所属

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>