From 61dab588f2aa0a7aca1e6f29819471f425462449 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 3 Mar 2022 01:57:41 +0900 Subject: 2022/02/07 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web/api/element/getboundingclientrect/index.md | 181 ++++++++++++++------- 1 file changed, 124 insertions(+), 57 deletions(-) diff --git a/files/ja/web/api/element/getboundingclientrect/index.md b/files/ja/web/api/element/getboundingclientrect/index.md index 69c2b2500a..ce2316632b 100644 --- a/files/ja/web/api/element/getboundingclientrect/index.md +++ b/files/ja/web/api/element/getboundingclientrect/index.md @@ -3,7 +3,7 @@ title: Element.getBoundingClientRect() slug: Web/API/Element/getBoundingClientRect tags: - API - - Boundary + - 境界 - Bounding - Bounds - CSSOM View @@ -12,101 +12,168 @@ tags: - DOM - Element - Enclosing - - Method + - メソッド - Minimum - - Rectangle - - Reference + - 長方形 + - リファレンス - Smallest - clientHeight - getBoundingClientRect - getClientRects - offsetHeight - scrollHeight - - メソッド +browser-compat: api.Element.getBoundingClientRect translation_of: Web/API/Element/getBoundingClientRect --- -
{{APIRef("DOM")}}
+{{APIRef("DOM")}} + +**`Element.getBoundingClientRect()`** メソッドは、要素の寸法と、その[ビューポート](/ja/docs/Glossary/Viewport)に対する相対位置に関する情報を返します。 -

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

+## 構文 -

構文

+```js +domRect = element.getBoundingClientRect(); +``` -
domRect = element.getBoundingClientRect();
+### 値 -

値

+返値は {{domxref("DOMRect")}} オブジェクトで、（パディングと境界の幅を含む）要素全体が収まる最小の長方形です。`left`, `top`, `right`, `bottom`, `x`, `y`, `width`, `height` の各プロパティは、長方形の全体の位置と大きさをピクセル数で記述します。 `width` と `height` 以外のプロパティは、ビューポートの左上を基準としています。 -

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

+![](element-box-diagram.png) -

DOMRect 値の説明

+このメソッドが返す {{domxref("DOMRect")}} オブジェクトの `width` と `height` プロパティは、内容物の幅や高さだけでなく、 `padding` と `border-width` も含まれます。標準的なボックスモデルでは、これは要素の `width` または `height` プロパティ + `padding` + `border-width` と同じになります。しかし、もし [`box-sizing: border-box`](/ja/docs/Web/CSS/box-sizing) が要素に設定されていれば、これは `width` または `height` と等しくなります。 -

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

+返される値は、その要素に対して {{domxref("Element.getClientRects", "getClientRects()")}} が返す矩形の和、つまり、その要素に関連する CSS の border-box と見なすことができます。 -

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

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

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

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

クロスブラウザーの代替

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

高いクロスブラウザーの互換性を必要とするスクリプトでは、 window.scrollX と window.scrollY の代わりに {{domxref("window.pageXOffset")}} と {{domxref("window.pageYOffset")}} を使うことができます。これらのプロパティへのアクセスを使わない、次のようなスクリプトもあります。

+### ブラウザー間で互換性のある代替手段 -
// For scrollX
+高いブラウザー間の互換性を必要とするスクリプトでは、 `window.scrollX` と `window.scrollY` の代わりに {{domxref("window.pageXOffset")}} と {{domxref("window.pageYOffset")}} を使うことができます。これらのプロパティへのアクセスを使わない、次のようなスクリプトもあります。
+
+```js
+// For scrollX
 (((t = document.documentElement) || (t = document.body.parentNode))
-  && typeof t.scrollLeft == 'number' ? t : document.body).scrollLeft
+  && 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
-
+ && typeof t.scrollTop == 'number' ? t : document.body).scrollTop +``` + +## 例 + +### 基本 + +この単純な例では、単純な `
` 要素のクライアント矩形を表す `DOMRect` オブジェクトを取得し、その下にプロパティを出力しています。 + +```html +
+``` + +```css +div { + width: 400px; + height: 200px; + padding: 20px; + margin: 50px auto; + background: purple; +} +``` + +```js +let elem = document.querySelector('div'); +let rect = elem.getBoundingClientRect(); +for (var key in rect) { + if(typeof rect[key] !== 'function') { + let para = document.createElement('p'); + para.textContent = `${ key } : ${ rect[key] }`; + document.body.appendChild(para); + } +} +``` + +{{EmbedLiveSample('Basic', '100%', 640)}} + +なお、 `width`/`height` は `width`/`height` + `padding` と等しくなります。 + +また、`x`/`left`, `y`/`top`, `right`, `bottom` の値は、それぞれのケースで、ビューポートの関連する辺から要素のその側までの絶対的な距離に等しいことに注意してください。 + +#### スクロール + +この例では、文書がスクロールされたときに、クライアント矩形の境界がどのように変化するかを示しています。 + +```html +
+
+``` + +```css +div#example { + width: 400px; + height: 200px; + padding: 20px; + margin: 50px auto; + background: purple; +} + +body { padding-bottom: 1000px; } +p { margin: 0; } +``` + +```js +function update() { + const container = document.getElementById("controls"); + const elem = document.getElementById("example"); + const rect = elem.getBoundingClientRect(); + + container.innerHTML = ''; + for (let key in rect) { + if(typeof rect[key] !== 'function') { + let para = document.createElement('p'); + para.textContent = `${ key } : ${ rect[key] }`; + container.appendChild(para); + } + } +} -

例

+document.addEventListener('scroll', update); +update(); +``` -
// rect は left, top, right, bottom, x, y, width, height の 8 つのプロパティを持つ DOMRect オブジェクト
-var rect = obj.getBoundingClientRect();
-
+{{EmbedLiveSample('Scrolling', '100%', 640)}} -

仕様書

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

メモ

+### メモ -

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

+最近のブラウザーでは返された `DOMRect` オブジェクトを変更することが可能ですが、これは `DOMRectReadOnly` を返す古いバージョンには該当しません。IE と Edge では、返された [`ClientRect`]() オブジェクトに対し、見過ごされたプロパティを追加することができず、`x` と `y` を補填することができません。 -

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

+互換性問題 (下記参照) のため、 `left`, `top`, `right`, `bottom` のみに頼ることが最も安全です。 -

返された DOMRect オブジェクトのプロパティは、自身のプロパティではありません。in 演算子や for...in では返されたプロパティを見つけますが、他の Object.keys() のような API では失敗します。さらに予期しないことに、 Object.assign() のような ES2015 やより新しい機能では、返されるプロパティのコピーに失敗します。

+返された `DOMRect` オブジェクトのプロパティは、自身のプロパティではありません。`in` 演算子や `for...in` では返されたプロパティを見つけますが、他の `Object.keys()` のような API では失敗します。さらに予期しないことに、 `Object.assign()` のような ES2015 やより新しい機能では、返されるプロパティのコピーに失敗します。 -
rect = elt.getBoundingClientRect()
+```js
+rect = elt.getBoundingClientRect()
 // emptyObj の結果は {}
 emptyObj = Object.assign({}, rect)
 emptyObj = { ...rect }
 {width, ...emptyObj} = rect
-
+``` -

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

+`DOMRect` の `top`, `left`, `right`, `bottom` の各プロパティは他のプロパティ値から計算されます。 -

ブラウザーの互換性

+## ブラウザーの互換性 -

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

+{{Compat}} -

関連情報

+## 関連情報 - +- {{domxref("Element.getClientRects", "getClientRects()")}} +- [MSDN: `getBoundingClientRect`]() +- [MSDN: `ClientRect`]()、初期バージョンの `DOMRect` -- cgit v1.2.3-54-g00ecf