Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.mozilla.org/ja/docs/Web/API/Window/resize_event below:

Window: resize イベント - Web API

Baseline Widely available

resize イベントは、この文書のビュー (ウィンドウ) の大きさが変更されたときに発行されます。

一部の初期のブラウザーでは、 resize イベントのハンドラーをすべての HTML 要素に設定することができました。現在でも onresize 属性や addEventListener() を使用して、どの要素にもハンドラーを設定することができます。しかし、 resize イベントは window オブジェクト (すなわち document.defaultView で返されるもの) でのみ発行されます。 window オブジェクトに登録されたハンドラーのみが、 resize イベントを受け取ります。

すべての要素が大きさの変更を通知できるようにする提案があります。 Resize Observer で草稿のドキュメントを、 GitHub issue で進行中の議論を読むことができます。

以下の例では、ウィンドウの大きさが変更されるたびに報告を出力します。この例は <iframe> 内で実行されているので、効果を見る前に実際に <iframe> の大きさを変更する必要があることを覚えておいてください。

<p>
  ブラウザーウィンドウを変更すると <code>resize</code> イベントを発行します。
</p>
<p>ウィンドウの高さ: <span id="height"></span></p>
<p>ウィンドウの幅: <span id="width"></span></p>

const heightOutput = document.querySelector("#height");
const widthOutput = document.querySelector("#width");

function reportWindowSize() {
  heightOutput.textContent = window.innerHeight;
  widthOutput.textContent = window.innerWidth;
}

window.onresize = reportWindowSize;

イベントハンドラーを設定するために addEventListener() メソッドを使用することもできます。

window.addEventListener("resize", reportWindowSize);

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4