【8/27まで】Udemyの人気コースが今なら1,200円から!!

【JavaScript入門】ブラウザの座標情報を取得するプロパティ

【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);

outerWidthinnerWidth の違い

outerWidthはブラウザ自体の横幅なので、開発者ツールも幅の範囲に含まれます。
一方、innerWidthはviewportの横幅なので、Webページの横幅までになります。
図解すると以下のようになります。

outerWidthとinnerWidthの違い

outerWidthとinnerWidthの違い

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です