From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../api/element/getboundingclientrect/index.html | 114 +++++++++++++++++++++ 1 file changed, 114 insertions(+) create mode 100644 files/ja/web/api/element/getboundingclientrect/index.html (limited to 'files/ja/web/api/element/getboundingclientrect') diff --git a/files/ja/web/api/element/getboundingclientrect/index.html b/files/ja/web/api/element/getboundingclientrect/index.html new file mode 100644 index 0000000000..f94d494111 --- /dev/null +++ b/files/ja/web/api/element/getboundingclientrect/index.html @@ -0,0 +1,114 @@ +--- +title: Element.getBoundingClientRect() +slug: Web/API/Element/getBoundingClientRect +tags: + - API + - Boundary + - Bounding + - Bounds + - CSSOM View + - Client + - Containing + - DOM + - Element + - Enclosing + - Method + - Minimum + - Rectangle + - Reference + - Smallest + - clientHeight + - getBoundingClientRect + - getClientRects + - offsetHeight + - scrollHeight + - メソッド +translation_of: Web/API/Element/getBoundingClientRect +--- +
{{APIRef("DOM")}}
+ +

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

+ +

構文

+ +
domRect = element.getBoundingClientRect();
+ +

値

+ +

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

+ +

DOMRect 値の説明

+ +

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

+ +

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

+ +

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

+ +

クロスブラウザーの代替

+ +

高いクロスブラウザーの互換性を必要とするスクリプトでは、 window.scrollX と window.scrollY の代わりに {{domxref("window.pageXOffset")}} と {{domxref("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();
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSSOM View", "#dom-element-getboundingclientrect", "Element.getBoundingClientRect()")}}{{Spec2("CSSOM View")}}初回定義
+ +

メモ

+ +

モダンブラウザーでは返された 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 の各プロパティは他のプロパティ値から計算されます。

+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Element.getBoundingClientRect")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf