ウィンドウの幅と高さを取得する(window.innerWidth,window.outerWidth,他)
JavaScript を使いウィンドウの幅と高さを取得する方法について解説します。 window.outerWidth プロパティと window.outerHeight プロパティを参照するとブラウザの幅と高さを参照でき、 window.innerWidth プロパティと window.innerHeight プロパティを参照するとコンテンツを表示する領域の幅と高さを取得することができます。
(Last modified: )
ウィンドウの幅と高さを取得する
ウィンドウの幅と高さを取得するためのプロパティとして次の 4 つが用意されています。
window.outerWidth ブラウザの幅 window.outerHeight ブラウザの高さ window.innerWidth コンテンツ表示領域の幅 window.innerHeight コンテンツ表示領域の高さ
それぞれのプロパティで取得できる幅と高さについては次の図を参照されてください。
※ ただ PC の環境で実際に計測してみると、 outerWidth と outerHeight は実際のブラウザのサイズよりも決まったサイズだけ大きく計測されました。
なおスクロールバーが表示されている場合 window.innerWidth と window.innerHeight はスクロールバーも含めたサイズとなります。
次のサンプルを見てください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル</title>
</head>
<body>
<h1>ウィンドウの幅と高さ</h1>
<p>ボタンをクリックすると幅と高さを取得します</p>
<input type="button" value="サイズ取得" id="btn">
<p>幅と高さは次のプロパティを参照します</p>
<ul>
<li>window.outerWidth ブラウザの幅</li>
<li>window.outerHeight ブラウザの高さ</li>
<li>window.innerWidth コンテンツ表示領域の幅</li>
<li>window.innerHeight コンテンツ表示領域の高さ</li>
</ul>
<script>
let btn = document.getElementById('btn');
btn.addEventListener('click', function(){
console.log('outerWitdh :' + window.outerWidth);
console.log('outerHeight:' + window.outerHeight);
console.log('innerWidth: ' + window.innerWidth);
console.log('innerHeight:' + window.innerHeight);
});
</script>
</body>
</html>
画面に表示されているボタンをクリックするとブラウザ外観の幅と高さ、そしてコンテンツ表示領域の幅と高さをそれぞれ取得してコンソールに出力します。
スクロールバーを除いた幅と高さを取得する
window.innerWidth プロパティと window.innerHeight プロパティはスクロールバーが表示されている場合、スクロールバーも含めた幅と高さを返します。スクロールバーを除いた幅と高さが必要な場合は、代わりに document.documentElement.clientWidth プロパティと document.documentElement.clientHeight プロパティを参照してください。
document.documentElement.clientWidth document.documentElement.clientHeight
clientWidth プロパティと clientHeight プロパティは対象の要素の内側のサイズを返します。このサイズにはスクロールバーが含まれません。コンテンツ表示領域のサイズを取得するには html 要素の clientWidth プロパティと clientHeight プロパティを参照します。
※ document.documentElement は document のルート要素( HTML ページの場合は html 要素)を返します。
次のサンプルを見てください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル</title>
</head>
<body>
<h1>ウィンドウの幅と高さ</h1>
<p>ボタンをクリックすると幅と高さを取得します</p>
<input type="button" value="サイズ取得" id="btn">
<p>幅と高さは次のプロパティを参照します</p>
<ul>
<li>window.outerWidth ブラウザの幅</li>
<li>window.outerHeight ブラウザの高さ</li>
<li>window.innerWidth コンテンツ表示領域の幅</li>
<li>window.innerHeight コンテンツ表示領域の高さ</li>
</ul>
<script>
let btn = document.getElementById('btn');
btn.addEventListener('click', function(){
console.log('innerWidth :' + window.innerWidth);
console.log('innerHeight :' + window.innerHeight);
const htmlelement = document.documentElement
console.log('clientWidth :' + htmlelement.clientWidth);
console.log('clientHeight:' + htmlelement.clientHeight);
});
</script>
</body>
</html>
画面に表示されているボタンをクリックするとコンテンツ表示領域の幅と高さ、およびスクロールバーの部分を除いた幅と高さをそれぞれ取得してコンソールに出力します。
現在は縦スクロールバーだけが表示されていたので、縦スクロールバーを表示するのに必要な 17px 分だけ window.innerWidth プロパティよりも document.documentElement.clientWidth プロパティの値が少なくなっています。
-- --
JavaScript を使いウィンドウの幅と高さを取得する方法について解説しました。
( Written by Tatsuo Ikura )
著者 / TATSUO IKURA
プログラミングや開発環境構築の解説サイトを運営しています。