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

Range.getClientRects() - 全ての矩形を取得する

getClientRects()は、Rangeのメソッドです。範囲を取り囲む全種類の矩形を取得します。範囲が要素や行をまたぐ場合、矩形は複数存在します。

概要

名前
getClientRects
所属
Range
IDL
DOMRectList getClientRects();
仕様書
https://drafts.csswg.org/cssom-view/#dom-range-getclientrects

説明

引数はありません。

返り値はDOMRectの配列です。

デモ

Range.getClientRects()のデモです。選択範囲をRangeで表現したオブジェクトにメソッドを実行します。選択範囲を取り囲む全種類の矩形を取得できるのを確認して下さい。分かりやすいように、3秒待つとスタイルシートで矩形に赤枠を表示します。矩形は行ごとに存在します。要素をまたぐ場合、要素の終了タグと改行の間にも、横幅0の矩形が存在します。赤枠を消すには、選択範囲を解除して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>
ABCDEFGHIJ<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 domRects = range.getClientRects() ;
	console.log( domRects ) ;

	appendText( "getClientRects(): " + domRects + "\n" ) ;

	for( var i=0,l=domRects.length; l>i; i++ ) {
		var domRect = domRects[i] ;
		appendText( "\t" + "[" + i + "]" + 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 () {
		createDOMRectElements( domRects ) ;
	}, 3000 ) ;
}

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

function createDOMRectElements ( domRects ) {
	var domRectElements = document.getElementsByClassName( "dom-rect" ) ;

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

	for( var i=0,l=domRects.length; l>i; i++ ) {
		var domRect = domRects[i] ;
		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日 (火)
コンテンツを公開しました。