Element.getBoundingClientRect() メソッドは、要素の寸法と、そのビューポートに対する位置を返します。

構文

var domRect = element.getBoundingClientRect();

返値は、要素に対しての getClientRects() が返す矩形の集合である DOMRect オブジェクトです。つまり、要素に関連付けられている CSS の境界ボックスのことです。結果は境界ボックス全体を表す読み取り専用の left, top, right, bottom, x, y, width, height の各プロパティを持つ、要素全体を含む最小の矩形です。 widthheight 以外のプロパティは、ビューポートの左上を基準としています。

Explanation of DOMRect values

空のボーダーボックスは完全に無視されます。もし要素のボーダーボックスの全てが空である場合は、 widthheight が 0 で、 topleft は、要素に対する (コンテンツ順での) 最初の CSS ボックスの左上である矩形を返します。

境界矩形を計算するときには、ビューポート領域(または他のスクロール可能な要素)のスクロール量が考慮されます。これは、スクロール位置が変更される度に (その値はビューポートの相対値であり、絶対値ではないため) 矩形の境界線のエッジ (top, right, bottom, left) が変更されることを意味しています。

もし文書の左上隅を基準とする境界矩形が必要な場合は、現在のスクロール位置から独立した境界矩形を取得する topleft プロパティに、現在のスクロール位置を加えるだけです(これらは window.scrollXwindow.scrollY で取得できます)。

クロスブラウザーの代替

高いクロスブラウザーの互換性を必要とするスクリプトでは、 window.scrollXwindow.scrollY の代わりに window.pageXOffsetwindow.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 オブジェクトに対し、見過ごされたプロパティを追加することができず、xy を補填することができません。

互換性問題 (下記参照) のため、 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

DOMRecttop left right bottom プロパティは他のプロパティ値から計算されます。

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応Chrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 3IE 完全対応 4Opera 完全対応 ありSafari 完全対応 6WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 4
補足
完全対応 4
補足
補足 Safari for iOS will modify the effective viewport based on the user zoom. This results in incorrect values whenever the user has zoomed.
Samsung Internet Android ?
widthChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 3.5IE 完全対応 9Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile ? Firefox Android ? Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?
heightChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 3.5IE 完全対応 9Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile ? Firefox Android ? Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?
xChrome 完全対応 ありEdge 未対応 なし
補足
未対応 なし
補足
補足 Returns a ClientRectList with ClientRect objects (which do not contain x and y properties) instead of DOMRect objects.
Firefox 完全対応 ありIE 未対応 なし
補足
未対応 なし
補足
補足 Returns a ClientRectList with ClientRect objects (which do not contain x and y properties) instead of DOMRect objects.
Opera 完全対応 ありSafari 未対応 なしWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile ? Firefox Android ? Opera Android 完全対応 ありSafari iOS ? Samsung Internet Android ?
yChrome 完全対応 ありEdge 未対応 なし
補足
未対応 なし
補足
補足 Returns a ClientRectList with ClientRect objects (which do not contain x and y properties) instead of DOMRect objects.
Firefox 完全対応 ありIE 未対応 なし
補足
未対応 なし
補足
補足 Returns a ClientRectList with ClientRect objects (which do not contain x and y properties) instead of DOMRect objects.
Opera 完全対応 ありSafari 未対応 なしWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile ? Firefox Android ? Opera Android 完全対応 ありSafari iOS ? Samsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。

関連情報

ドキュメントのタグと貢献者

最終更新者: mdnwebdocs-bot,