/
index.md
89 lines (71 loc) · 3.03 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
---
title: "ResizeObserver: ResizeObserver() コンストラクター"
short-title: ResizeObserver()
slug: Web/API/ResizeObserver/ResizeObserver
l10n:
sourceCommit: 76717f752447b6eef25bf29c12272e407ee5cb6b
---
{{APIRef("Resize Observer API")}}
**`ResizeObserver`** コンストラクターは新しい {{domxref("ResizeObserver")}} オブジェクトを作成し、これを {{domxref('Element')}} のコンテンツまたは境界ボックス、または {{domxref('SVGElement')}} のバウンディングボックスに対する変更を報告するために使用することができます。
## 構文
```js-nolint
new ResizeObserver(callback)
```
### 引数
- `callback`
- : 監視中のものに寸法の変更が発生するたびに呼び出される関数です。この関数は 2 つの引数で呼び出されます。
- `entries`
- : {{domxref('ResizeObserverEntry')}} オブジェクトの配列で、それぞれの変更の後で要素の新しい寸法にアクセスするために使用することができます。
- `observer`
- : `ResizeObserver` 自身への参照で、必要に応じてコールバック内から確実にアクセスできます。これは、たとえば特定の条件に達したときにオブザーバーを自動的に監視解除するために使用できますが、必要ない場合は省略することができます。
コールバックは一般に、次のパターンに従います。
```js
function callback(entries, observer) {
for (const entry of entries) {
// 各項目に何かをする
// 場合によってはオブザーバー自体に何かをする
}
}
```
## 例
次のスニペットは [resize-observer-text.html](https://mdn.github.io/dom-examples/resize-observer/resize-observer-text.html) ([ソースを表示](https://github.com/mdn/dom-examples/blob/main/resize-observer/resize-observer-text.html)) の例から取ったものです。
```js
const resizeObserver = new ResizeObserver((entries) => {
for (const entry of entries) {
if (entry.contentBoxSize) {
if (entry.contentBoxSize[0]) {
h1Elem.style.fontSize = `${Math.max(
1.5,
entry.contentBoxSize[0].inlineSize / 200,
)}rem`;
pElem.style.fontSize = `${Math.max(
1,
entry.contentBoxSize[0].inlineSize / 600,
)}rem`;
} else {
// legacy path
h1Elem.style.fontSize = `${Math.max(
1.5,
entry.contentBoxSize.inlineSize / 200,
)}rem`;
pElem.style.fontSize = `${Math.max(
1,
entry.contentBoxSize.inlineSize / 600,
)}rem`;
}
} else {
h1Elem.style.fontSize = `${Math.max(
1.5,
entry.contentRect.width / 200,
)}rem`;
pElem.style.fontSize = `${Math.max(1, entry.contentRect.width / 600)}rem`;
}
}
console.log("サイズが変更されました");
});
resizeObserver.observe(divElem);
```
## 仕様書
{{Specifications}}
## ブラウザーの互換性
{{Compat}}