We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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

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


We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 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,