テキスト矩形のグループを囲む、テキストの矩形オブジェクトを返します。

文法

rectObject = object.getBoundingClientRect();

戻り値は、要素のgetClientRects()によって返された矩形が結合した TextRectangleオブジェクトです。 これはすなわち、要素に関連付くCSSボーダーボックスということになります。

戻り値であるTextRectangleオブジェクトは、 ボーダーボックスをピクセルで表す読み込み専用のプロパティで、 left、top、right、bottomを含みます。 topとleftは、ビューポートの左上からの相対になります。

注意: Gecko 1.9.1で、widthとheightプロパティが、 TextRectangleオブジェクトへ追加されました。

空のボーダーボックスは完全に無視されます。 もし、全ての要素のボーダーボックスが空の場合、 返される矩形はwidthとheightが0で、 topとleftは要素の最初(コンテンツ順で)のCSSボックスのボーダーボックスの左上になります。

外接する四角形を計算する際に、 ビューポート領域(または、その他のスクロール可能領域)で行われたスクロール量が考慮されます。 これは、topとleftのプロパティが、 スクロール位置が変更されると、すぐに値を変更することを意味します。(翻訳に自信なし) (そのため、それらの値はビューポートに相対的であり、絶対的ではないことになります。) これが望まれない振る舞いである場合、topとleftプロパティへ現在のスクロール位置を追加することで (window.scrollXとwindow.scrollYを介して)、 現在のスクロール位置から独立した一定の値を取得します。

注意: Gecko 12.0から、要素の矩形の境界を計算する際に、 CSS transformsの影響を考慮するようになりました。

クロスブラウザ互換性のため、下記を使用する場合を除き、

// window.pageXOffsetとwindow.pageYOffsetが未定義
// (更にwindow.pageXOffsetとwindow.pageYOffsetも未定義)
// である場合、
(((t = document.documentElement) || (t = document.body.parentNode)) && typeof t.ScrollLeft == 'number' ? t : document.body).ScrollLeft
// 且つ
(((t = document.documentElement) || (t = document.body.parentNode)) && typeof t.ScrollTop == 'number' ? t : document.body).ScrollTop

window.scrollXとwindow.scrollYの代わりに、 window.pageXOffsetとwindow.pageYOffsetを使用してください。 (翻訳に自信なし)

例

var rect = obj.getBoundingClientRect();

rectは、left、top、 right、bottomの4つのプロパティを持つDOMRectオブジェクトです。

ブラウザ互換性

デスクトップ

機能	Chrome	Firefox (Gecko)	IE	Opera	Safari
基本	1.0	3.0 (1.9)	4.0	◯	4.0
width/height	◯	3.5 (1.9.1)	9	◯	◯

モバイル

機能	Android	Chrome for Android	Firefox Mobile	IE Mobile	Opera Mobile	Safari Mobile
基本	2.0	1.0	1.0 (1.9)	6.0	◯	4.0
width/height	?	?	?	?	?	?

IE8とそれ以前のバージョンでは、getBoundingClientRect()に返されるTextRectangleオブジェクトには、 heightとwidthプロパティが欠けていました。 また、追加のプロパティ(heightとwidthを含む)はこれらのTextRectangleに追加することが出来ません。

Gecko 12.0からは、外接する四角形を計算する際に、 CSS transformsの影響が考慮されるようになりました。

仕様

CSSOM Views: The getClientRects() and getBoundingClientRect() methods

注意: getBoundingClientRect()は、MSのIE DHTMLオブジェクトモデルに最初に導入されました。

関連項目

• MSDN: getBoundingClientRect Method
• getClientRects()

 Back to top