ページの横幅、高さ、スクロール量を取得する書き方いろいろです。
サンプルソース
・ドキュメント系のサイズ
|
1 2 3 4 5 6 7 8 9 10 11 |
//documentのサイズ var w = document.documentElement.scrollWidth; //幅 var h = document.documentElement.scrollHeight; //高さ //document表示部分のサイズ var w = document.documentElement.clientWidth; //幅 var h = document.documentElement.clientHeight; //高さ //documentのスクロール量 var x = document.documentElement.scrollLeft //横スクロール量 var y = document.documentElement.scrollTop; //縦スクロール量 |
- （お使いの環境の値）
・モニター系のサイズ
|
1 2 3 4 5 6 7 |
//モニターの解像度 var w = screen.width; //幅 var h = screen.height; //高さ //モニターの利用可能な領域 var w = screen.availWidth; //幅 var h = screen.availHeight; //高さ |
- （お使いの環境の値）
・ウィンドウ系のサイズ
|
1 2 3 4 5 6 7 8 9 10 11 |
//ウィンドウの外側のサイズ var w = window.outerWidth; //幅 var h = window.outerHeight; //高さ //ウィンドウの内側のサイズ var w = window.innerWidth; //幅 var h = window.innerHeight; //高さ //ウィンドウのスクロール量 var x = window.scrollX; //横スクロール量 var y = window.scrollY; //縦スクロール量 |
- （お使いの環境の値）
解説
- ドキュメント系は、ページ自体に関連するサイズを表します。
- モニター系は、モニター（ディスプレイ）に関連するサイズを返します。
- ウィンドウ系は、画面（ブラウザ）に関連するサイズを返します。