ywork2020.com

Title

ウィンドウサイズを差分値で変更する

目次 (INDEX)

window.resizeBy とは

ここで説明する window とは次の語句からなる JavaScript のグローバル変数であり、Window オブジェクトを参照します。
window
読み: ウィンドウ
意味: 窓
ここで説明する resizeBy とは次の語句からなる JavaScript のメソッドです。
resize
読み: リサイズ
意味: サイズを変更する
by
読み: バイ
意味: ~によって

目次に戻る

window.resizeBy メソッドの概要

このメソッドは、引数に与えたピクセル値で、現在のウィンドウを差分でリサイズします。

ただし、これは全てのウィンドウをリサイズできるわけではありません。 リサイズできるのは window.open() により、単独で開かれたウィンドウのみです。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

window.resizeBy(x_Differential, y_Differential)
  • x_Differential: 横幅の差分値です。ピクセル単位で指定します。
  • y_Differential: 縦幅の差分値です。ピクセル単位で指定します。

目次に戻る

サンプルコードと実行結果

ここでは、2つのボタンを配置しています。

まず、ウィンドウ.オープン のボタンをクリックして単独のウィンドウで、このページを開いてください。 次に、単独のウィンドウで開いたページの ウィンドウ.リサイズ のボタンをクリックしてください。

ウィンドウ.リサイズ をクリックする度に、ウィンドウの縦横の幅が 50 ピクセルずつ狭まっていきます。 なお、概要のところでも述べていますが、このメソッドは単独のウィンドウでしか機能しません。

サンプルコード: HTML
<body>
	<button onclick="funcWindowOpen()"> ウィンドウ.オープン </button>
	<hr style="margin: 3em 0;">
	<button onclick="funcResizeBy()"> ウィンドウ.リサイズ </button>
	<script>...</script>
</body>
  • 02: button (このボタンをクリックすると funcWindowOpen() 関数を呼び出します。)
  • 04: button (このボタンをクリックすると funcResizeBy() 関数を呼び出します。)
サンプルコード: script
<script>
	function funcWindowOpen(){
		window.open("ファイル名", null, "width=650, height=600, left=200, top=200");
	}
	function funcResizeBy(){
		window.resizeBy(-50, -50);
	}
</script>
  • 02-04: funcWindowOpen() (この関数は 03 行目のコードりより、新しい単独のウィンドウを開きます。)
  • 05-07: funcResizeBy() (この関数は 06 行目のコードにより、ウィンドウをリサイズします。)
実行結果:

目次に戻る