Element.getBoundingClientRect()
メソッドは、要素の寸法と、そのビューポートに対する位置を返します。
構文
domRect = element.getBoundingClientRect();
値
返値は、要素に対しての getClientRects()
が返す矩形の集合である DOMRect
オブジェクトです。つまり、要素に関連付けられている CSS の境界ボックスのことです。結果は境界ボックス全体を表す読み取り専用の left
, top
, right
, bottom
, x
, y
, width
, height
の各プロパティを持つ、要素全体を含む最小の矩形です。 width
と height
以外のプロパティは、"ビューポートの左上を基準"としています。
空のボーダーボックスは完全に無視されます。もし要素のボーダーボックスの全てが空である場合は、 width
と height
が 0 で、 top
と left
は、要素に対する (コンテンツ順での) 最初の CSS ボックスの左上である矩形を返します。
境界矩形を計算するときには、ビューポート領域(または他のスクロール可能な要素)のスクロール量が考慮されます。これは、スクロール位置が変更される度に (その値はビューポートの相対値であり、絶対値ではないため) 矩形の境界線のエッジ (top
, right
, bottom
, left
) が変更されることを意味しています。
もし文書の左上隅を基準とする境界矩形が必要な場合は、現在のスクロール位置から独立した境界矩形を取得する top
と left
プロパティに、現在のスクロール位置を加えるだけです(これらは window.scrollX
と window.scrollY
で取得できます)。
クロスブラウザーの代替
高いクロスブラウザーの互換性を必要とするスクリプトでは、 window.scrollX
と window.scrollY
の代わりに window.pageXOffset
と window.pageYOffset
を使うことができます。これらのプロパティへのアクセスを使わない、次のようなスクリプトもあります。
// For scrollX
(((t = document.documentElement) || (t = document.body.parentNode))
&& typeof t.scrollLeft == 'number' ? t : document.body).scrollLeft
// For scrollY
(((t = document.documentElement) || (t = document.body.parentNode))
&& typeof t.scrollTop == 'number' ? t : document.body).scrollTop
例
// rect は left, top, right, bottom, x, y, width, height の 8 つのプロパティを持つ DOMRect オブジェクト
var rect = obj.getBoundingClientRect();
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Object Model (CSSOM) View Module Element.getBoundingClientRect() の定義 |
草案 | 初回定義 |
メモ
モダンブラウザーでは返された DOMRect
オブジェクトを変更することが可能ですが、これは DOMRectReadOnly
を返す古いバージョンには該当しません。IE と Edge では、返された ClientRect
オブジェクトに対し、見過ごされたプロパティを追加することができず、x
と y
を補填することができません。
互換性問題 (下記参照) のため、 left
, top
, right
, bottom
のみに頼ることが最も安全です。
返された DOMRect
オブジェクトのプロパティは、自身のプロパティではありません。in
演算子や for...in
では返されたプロパティを見つけますが、他の Object.keys()
のような API では失敗します。さらに予期しないことに、 Object.assign()
のような ES2015 やより新しい機能では、返されるプロパティのコピーに失敗します。
rect = elt.getBoundingClientRect()
// emptyObj の結果は {}
emptyObj = Object.assign({}, rect)
emptyObj = { ...rect }
{width, ...emptyObj} = rect
DOMRect
の top
, left
, right
, bottom
の各プロパティは他のプロパティ値から計算されます。
ブラウザーの互換性
BCD tables only load in the browser
関連情報
getClientRects()
- MSDN:
getBoundingClientRect
- MSDN:
ClientRect
, an earlier version ofDOMRect