【JavaScript入門】ブラウザの座標情報を取得するプロパティ
ブラウザの座標を取得するプロパティとして以下が用意されています。
| プロパティ名 | 意味 |
|---|---|
| screenX | ディスプレイの左端からブラウザまでの距離 |
| screenY | ディスプレイの上端からブラウザまでの距離 |
| outerHeight | ブラウザ自体の高さ |
| outerWidth | ブラウザ自体の幅 |
| innerHeight | viewportの高さ（スクロールバー含む） |
| innerWidth | viewportの幅（スクロールバー含む） |
| pageXOffset | 水平スクロールの位置 |
| pageYOffset | 垂直スクロールの位置 |
簡単に図解すると以下のようになります。
ブラウザ解像度
各プロパティ値を取得するためのコードは以下のとおりです。
js
console.log("screenX :" + window.screenX);
console.log("screenY :" + window.screenY);
console.log("outerHeight :" + window.outerHeight);
console.log("outerWidth :" + window.outerWidth);
console.log("innerHeight :" + window.innerHeight);
console.log("innerWidth :" + window.innerWidth);
console.log("pageXOffset :" + window.pageXOffset);
console.log("pageYOffset :" + window.pageYOffset);
outerWidthとinnerWidth の違いouterWidthはブラウザ自体の横幅なので、開発者ツールも幅の範囲に含まれます。
一方、innerWidthはviewportの横幅なので、Webページの横幅までになります。
図解すると以下のようになります。
outerWidthとinnerWidthの違い
以上で記事の解説はお終い！
HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ！同僚に差をつけよう！