【JavaScript】 ウィンドウ情報の取得
以下のリンクをクリックすると、各項目の詳細に移動できます。
- window.name
- window.innerHeight
- window.innerWidth
- window.outerHeight
- window.outerWidth
- window.pageXOffset
- window.pageYOffset
window.name
window.name
は、ウィンドウまたはタブに関連付けられた名前を保持します。この名前は、同じウィンドウまたはタブに複数のドキュメントを読み込む場合に便利です。たとえば、異なるURL間で状態を共有するために使われます。
例えば、以下のように使うことができます:
window.name = 'myWindow';
次に、別のスクリプトでそのウィンドウを参照して状態を変更することができます:
console.log(window.name); // 'myWindow'
window.innerHeight
window.innerHeight
は、ウィンドウのビューポートの高さをピクセル単位で返します。これは、スクロールバーが表示されている場合でも、ウィンドウ内に表示されるコンテンツの高さを指します。
例えば、ウィンドウの高さをコンソールに表示するには、次のようにします:
console.log(window.innerHeight);
このプロパティは、レスポンシブデザインを使用してウィンドウの高さに基づいてレイアウトを調整する際に便利です。
window.innerWidth
window.innerWidth
は、ウィンドウのビューポートの幅をピクセル単位で返します。スクロールバーが表示されていても、ウィンドウ内に表示されるコンテンツの幅が反映されます。
例えば、ウィンドウの幅をコンソールに表示するには、次のようにします:
console.log(window.innerWidth);
これを利用して、ウィンドウのサイズに応じたレイアウト調整を行うことができます。
window.outerHeight
window.outerHeight
は、ブラウザウィンドウ全体の高さをピクセル単位で返します。これは、ウィンドウのビューポートの高さに加えて、ウィンドウのフレームやメニュー、ツールバーの高さも含まれます。
例えば、次のようにしてウィンドウの外部高さを取得できます:
console.log(window.outerHeight);
これを利用すると、ブラウザウィンドウのサイズに関連する操作を行うことができます。
window.outerWidth
window.outerWidth
は、ウィンドウの全体の幅をピクセル単位で返します。ウィンドウのビューポートの幅に加えて、ウィンドウのフレームやツールバーの幅も含まれます。
例えば、次のコードを使ってウィンドウの外部幅を表示することができます:
console.log(window.outerWidth);
これにより、ブラウザウィンドウの全体的な幅を取得することができます。
window.pageXOffset
window.pageXOffset
は、ドキュメントの水平スクロール量をピクセル単位で返します。ページがスクロールされている場合、その水平方向のオフセットが返されます。
スクロール位置を取得する例:
console.log(window.pageXOffset);
これを使って、スクロール位置に基づいて動的なエレメントの位置を調整することができます。
window.pageYOffset
window.pageYOffset
は、ドキュメントの垂直スクロール量をピクセル単位で返します。ページが縦にスクロールされている場合、その垂直方向のオフセットが返されます。
スクロール位置を取得する例:
console.log(window.pageYOffset);
これを使って、ページ内の位置に基づいて要素を動的に配置することができます。