JavaScript でのウィンドウサイズ変更イベント
このチュートリアルでは、JavaScript の addEventListener() および onresize() 関数を使用してサイズ変更イベントを追加する方法について説明します。
JavaScript の addEventListener() 関数を使用してサイズ変更イベントを追加する
サイズ変更イベントをウィンドウに追加するには、JavaScript の addEventListener() 関数を使用できます。この関数は、関数を含むイベントをオブジェクトに追加します。たとえば、オブジェクトウィンドウにイベントを追加して、その幅と高さを取得し、Web ページに表示してみましょう。以下のコードを参照してください。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<span>Width = </span><span id="SpanID1"></span>
<br />
<span>Height = </span><span id="SpanID2"></span>
<script type="text/javascript">
start();
window.addEventListener('resize', start);
function start(){
document.getElementById('SpanID1').innerText = document.documentElement.clientWidth;
document.getElementById('SpanID2').innerText = document.documentElement.clientHeight;
}
</script>
</body>
</html>
出力：
Width = 798
Height = 779
上記のコードでは、テキスト Width= のスパンを追加し、その後、body セクションに ID SpanID1 の空のスパンを追加しました。カーソルを新しい行に移動するために br タグを追加し、新しい行にテキスト Height= の別のスパンを追加し、その後、ID SpanID2 の別の空のスパンを追加しました。
スパンの ID は、JavaScript で要素を取得するために使用されます。スクリプトタグには、ウィンドウの幅と高さで 2つのスパンのテキストを変更するために使用される関数 start() があります。start() 関数の後に、ユーザーがウィンドウのサイズを変更したときに start() 関数を呼び出すサイズ変更イベントを追加しました。ウィンドウの幅と高さがページに表示され、ウィンドウのサイズが変更されると変更されます。上記のコードを HTML ファイルに保存し、任意のブラウザで開いてサイズを変更し、コードが機能するかどうかを確認できます。addEventListener() 関数を使用して、チェックボックスなどの任意のオブジェクトにイベントを追加することもできます。
JavaScript の onresize() 関数を使用してサイズ変更イベントを追加する
ウィンドウにサイズ変更イベントを追加するには、JavaScript の onresize() 関数を使用できます。この関数は、ウィンドウのサイズが変更された場合に何が起こるかを指定するために使用されます。たとえば、オブジェクトウィンドウにイベントを追加して、その幅と高さを取得し、Web ページに表示してみましょう。以下のコードを参照してください。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<span>Width = </span><span id="SpanID1"></span>
<br />
<span>Height = </span><span id="SpanID2"></span>
<script type="text/javascript">
start();
window.onresize = start;
function start(){
document.getElementById('SpanID1').innerText = document.documentElement.clientWidth;
document.getElementById('SpanID2').innerText = document.documentElement.clientHeight;
}
</script>
</body>
</html>
出力：
Width = 798
Height = 779
上記のコードでは、ウィンドウのサイズが変更されている場合、start() 関数が呼び出されます。ご覧のとおり、出力は上記の方法と同じです。
