ブラウザの座標を取得するプロパテ
ブラウザの座標を取得するプロパティとして以下が用意されています。
プロパティ名 | 意味 |
---|---|
screenX | ディスプレイの左端からブラウザまでの距離 |
screenY | ディスプレイの上端からブラウザまでの距離 |
outerHeight | ブラウザ自体の高さ |
outerWidth | ブラウザ自体の幅 |
innerHeight | viewportの高さ(スクロールバー含む) |
innerWidth | viewportの幅(スクロールバー含む) |
pageXOffset | 水平スクロールの位置 |
pageYOffset | 垂直スクロールの位置 |
簡単に図解すると以下のようになります。
![ブラウザ解像度](https://i0.wp.com/www.zunouissiki.com/wp-content/uploads/2021/05/ブラウザ解像度.png?resize=801%2C601&ssl=1)
ブラウザ解像度
各プロパティ値を取得するためのコードは以下のとおりです。
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の違い](https://i0.wp.com/www.zunouissiki.com/wp-content/uploads/2021/05/outerWidthとinnerWidthの違い.png?resize=880%2C486&ssl=1)
outerWidthとinnerWidthの違い
![](https://i0.wp.com/www.zunouissiki.com/wp-content/uploads/2022/11/pcpengin.jpg?resize=80%2C80&ssl=1)
以上で記事の解説はお終い!
HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ!同僚に差をつけよう!