[初めてのホームページ講座] [JavaScript , DHTML] [ウインドウサイズ]

Dynamic HTMLの参考書 Java Scriptの参考書

ウインドウサイズ

機能

ウインドウの幅や高さを取得します。 スクロールバーやツールバーなどの大きさも差し引いたウインドウ内部の表示領域の大きさを取得できます。 取得した大きさの単位はピクセルになります。

ウインドウの大きさは使用する環境によって大きく異なります。 それを無視してピクセル単位のレイアウト調整を行ってもうまくいかない場合が多数あります。 こんな時、ウインドウの大きさを取得して、それに合わせたレイアウト調整や、DHTMLを設計することは非常に有効です。

書式

document.body.clientWidth
ウインドウの幅 (IE)
document.body.clientHeight
ウインドウの高さ (IE)
innerWidth
ウインドウの幅 (NN)
innerHeight
ウインドウの高さ (NN)

JavaScriptバージョン

JavaScript1.2

対応ブラウザ

IE4,NN4以上

使用例

利用方法

関数に引数(widthかheight)を渡して、戻り値を使用する形をとります。

必要な関数(後述の「GetWindowSize」)をスクリプト内に埋め込みます。 ウインドウの横幅をscrXという変数に代入したいとき「scrX = GetWindowSize("width");」とします。 詳細は「Function」を参照して下さい。

Function

スクリーンの大きさ取得
関数名
GetWindowSize(type)
戻り値
整数(ピクセル数)。ただし、引数が異なる場合、取得不可能な場合は「-1」を返す。
引数
「width」「height」の何れかを指定。「width」であれば幅を、「height」であれば高さを返す。
ソース
//ウインドウサイズ取得
function GetWindowSize(type){
	switch(type){
		case "width":
			if(document.all){
				return(document.body.clientWidth);
			}else if(document.layers){
				return(innerWidth);
			}else{
				return(-1);
			}
		break;
		case "height":
			if(document.all){
				return(document.body.clientHeight);
			}else if(document.layers){
				return(innerHeight);
			}else{
				return(-1);
			}
		break;
		default:
			return(-1);
		break;
	}
}
使用例
scrX = GetWindowSize("width");
scrY = GetWindowSize("height");
[Go To Top]

Last modified Apr,2000
Copyright(C)2000 T.Miyazaki , All Rights Reserved.