この翻訳は不完全です。英語から この記事を翻訳 してください。

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

構文

var domRect = element.getBoundingClientRect();

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

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

境界矩形を計算するときには、ビューポート領域(または他のスクロール可能な要素)のスクロール量が考慮されます。これは、スクロール位置が変更される度に(その値はビューポートの相対値であり、絶対値ではないため)矩形の境界線のエッジ(topleftbottom 及び right)が変更されることを意味しています。もし文書の左上隅を基準とする境界矩形が必要な場合は、現在のスクロール位置から独立した境界矩形を取得する topleft プロパティに、現在のスクロール位置を加えるだけです(これらは window.scrollXwindow.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 は次の 8 つのプロパティを持つ、DOMRect オブジェクトです。
// left, top, right, bottom, x, y, width, height
var rect = obj.getBoundingClientRect();

仕様

仕様 状況 コメント
CSS Object Model (CSSOM) View Module
Element.getBoundingClientRect() の定義
草案 初回定義

注記

モダンブラウザでは返された DOMRect オブジェクトを変更することが可能ですが、これは DOMRectReadOnly を返す古いバージョンには該当しません。IE と Edge では、返された ClientRect MSDN: ClientRect オブジェクトに対し、見過ごされたプロパティを追加することができず、xy を補填することができません。

互換性問題(下記参照)のため、lefttoprightbottom のみに頼ることが最も安全です。

返された 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 プロパティは他のプロパティ値から計算されます。

ブラウザ互換性

現在、互換性データを可読形式の JSON フォーマットに置き換えているところです。 この互換性一覧は古い形式を使っており、これに含まれるデータの置き換えが済んでいません。 手助けしていただける場合は、こちらから!

機能 Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 1.0 [1] (有) 3.0 (1.9)[3] 4.0 [2] (有) 4.0
width/height (有) (有) 3.5 (1.9.1)[3] 9 (有) (有)
x/y (有) 未サポート [4] (有) 未サポート [4] ? 未サポート
機能 Android Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート 2.0 1.0 (有) 1.0 (1.9) 6.0 (有) 4.0[5]

[1] CSS spec for 'use' element referencing 'symbol' element requires default width and height for the <use> element set to 100%. Also spec for width and height 'svg' attributes requires 100% as default values. Google Chrome does not follow these requirements for <use>. Also Chrome does not take stroke-width into account. So getBoundingClientRect() may return different rectangles for Chrome and for Firefox.

[2] In IE8 and below, the returned non-standard ClientRectobject lacks height and width, in addition to lacking x and y properties. The object was read-only which prevented inserting these as computed values for compatibility.

[3] Gecko 1.9.1 adds width and height properties to the DOMRect object.

Starting in Gecko 12.0 (Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9), the effect of CSS transforms is considered when computing the element's bounding rectangle.

[4] IE and Edge return a non-standard ClientRect object MSDN: ClientRect which does not have the x and y properties found in standard DOMRect objects.

[5] Safari Mobile will modify the effective viewport based on the user zoom. This results in incorrect values whenever the user has zoomed.

参考情報

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

このページの貢献者: sii, fscholz, khalid32, ethertank, Mgjbot, Potappo, Nanto vi
最終更新者: sii,