DOM

：

：

Element.getClientRects() メソッド

　編集：2022.10.02 by T.A.

[Edge]○。→、

element とそのに対する配置位置と、要素寸法に関する情報を表す DOMRect のコレクションを返します。

コレクションになるのは、インライン要素に対応していて、各行での配置が異なる為です。

mdn： クライアントにあるそれぞれの CSS 境界ボックスの境界線を示す DOMRect オブジェクトのコレクションを返します。

多くの要素はそれぞれ 1 つの境界ボックスしか持ちませんが、複数行のインライン要素（例えば複数行にまたがる <span> 要素、既定の場合）には行ごとに囲む境界ボックスがあります。

構文
element.getClientRects()
element Element。
戻り値

返される値は DOMRect オブジェクトのコレクション。

そのコレクションは、要素に関連付けられた CSS の境界ボックスごとに 1 つずつ用意されます。

それぞれの DOMRect オブジェクトには読み取り専用の left、top、right、bottom の各プロパティがあり、の左上からの境界ボックスの座標をピクセル数で表します。

キャプションを持つ表の場合、キャプションがテーブルの境界ボックスの外側にあっても含まれます。

外部の <svg> 以外の SVG 要素に対して呼び出された場合、結果として得られる矩形の相対的な「ビューポート」は、その要素の外部の <svg> が確立したビューポートになります（明確にするために、矩形は外部の <svg> の viewBox 変形によっても変換されます）。

本来、Microsoft はこのメソッドがテキストの各行に対して TextRectangle オブジェクトを返すようにしていました。しかし、CSSOM の作業草案では、各境界ボックスに対して DOMRect を返すように指定しています。インライン要素では、この 2 つの定義は同じです。しかし、ブロック要素の場合、Mozilla は単一の矩形のみを返します。

例

HTML： 

<DIV style="border:1px solid #000; width:200px; font-size:20px;">DIV要素。外側
  <DIV id=IdTest style="margin:10px; border:5px solid #f88; padding:10px;">DIV要素。id=IdTest
  </DIV>
  開始<SPAN id=IdTest2 style="border:1px solid #f00;">[SPAN要素。id=IdTest2。あああああああああ]</SPAN>終了<BR>
  終わり
</DIV>

JavaScript： 

D=IdTest.getClientRects(); //＝[object]：[object DOMRectList]
	//0＝[object]：[object DOMRect]
	//length＝[number]：1
	//item＝[function]：function item() { [native code] }
D=IdTest2.getClientRects(); //＝[object]：[object DOMRectList]
	//0＝[object]：[object DOMRect]
	//1＝[object]：[object DOMRect]
	//2＝[object]：[object DOMRect]
	//length＝[number]：3
	//item＝[function]：function item() { [native code] }
DA=D[0]; //＝[object]：[object DOMRect]
	//x＝[number]：74.890625
	//y＝[number]：146.03125
	//width＝[number]：119
	//height＝[number]：22
	//top＝[number]：146.03125
	//right＝[number]：193.890625
	//bottom＝[number]：168.03125
	//left＝[number]：74.890625
	//toJSON＝[function]：function toJSON() { [native code] }
DA=D[1]; //＝[object]：[object DOMRect]
	//x＝[number]：32.890625
	//y＝[number]：170.03125
	//width＝[number]：191
	//height＝[number]：22
	//top＝[number]：170.03125
	//right＝[number]：223.890625
	//bottom＝[number]：192.03125
	//left＝[number]：32.890625
	//toJSON＝[function]：function toJSON() { [native code] }
テスト