JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのscreen.availHeightプロパティとは？使い方とサンプルコードを解説

JavaScriptのscreen.availHeightプロパティは、ユーザーの画面（スクリーン）で実際に利用可能な高さを取得するためのプロパティです。戻り値はピクセル単位の整数で、WindowsのタスクバーやmacOSのDockなど、OSが常時表示しているUI領域は含まれません。

availHeightプロパティの特徴

  • 画面全体の高さではなく、ブラウザやアプリが使用できる「利用可能な高さ」を返します。
  • タスクバーなどのOS標準のインターフェース部分は除外されます。
  • 戻り値はピクセル単位の数値です。

サンプルコード

以下のコードを実行すると、JavaScriptでscreen.availHeightプロパティを使って画面の利用可能な高さを取得し、表示することができます。

<!DOCTYPE html>
<html>
  <body>
    <script>
      document.write("画面の利用可能な高さ: " + screen.availHeight);
    </script>
  </body>
</html>

実行結果の例

画面解像度が1920×1080で、タスクバーの高さが40pxの場合、出力は次のようになります。

画面の利用可能な高さ: 1040

関連プロパティとの違い

似たプロパティとしてscreen.heightがあります。screen.heightはタスクバーを含む画面全体の高さを返すのに対し、screen.availHeightはタスクバーなどを除いた利用可能な高さを返す点が異なります。ウィンドウサイズやレイアウトの計算を行う際には、用途に応じて使い分けるとよいでしょう。

  1. JavaScriptのsourceプロパティとは？正規表現パターンテキストを取得する方法を解説

    JavaScriptのsourceプロパティは、RegExp（正規表現）オブジェクトに設定されたパターン文字列そのものを返すプロパティです。g（グローバルマッチ）やi（大文字・小文字を区別しない）などのフラグは結果に含まれず、マッチング対象となる純粋な正規表現テキストのみを取得できます。 動的に正規表現を組み立てたい場合や、デバッグ時に実際に適用されているパターンを確認したい場合などに活用できる便利なプロパティです。 基本構文 const regex = /pattern/flags; console.log(regex.source); // パターン文字列のみが返される サンプルコード

  2. HTML Screen availHeightプロパティとは?使い方とサンプルコードを解説

    HTMLの Screen availHeight プロパティは、ユーザーの画面で実際に利用できる高さ(ピクセル単位)を返します。この値には、ブラウザのツールバーやOSのタスクバーといったインターフェース要素の高さは含まれません。そのため、ウィンドウを最大化した際に表示可能な領域の高さを取得したい場合に便利です。構文availHeightプロパティの基本的な構文は以下のとおりです。screen.availHeightサンプルコードここでは、ボタンをクリックするとavailHeightプロパティの値が画面に表示される簡単なデモを紹介します。<!DOCTYPE html> <htm