jQueryで簡単に画面の高さを取得する方法

jQuery を使用して画面の高さを簡単に取得する方法

Web 開発のプロセスでは、現在のブラウザ ウィンドウの高さを取得する必要があることがあります。対応するレイアウトを調整または特定の操作を実行します。 jQueryを使うと画面の高さを取得する機能を簡単に実装できます。具体的なコード例を以下に説明します。

まず、HTML ファイルに jQuery ライブラリを導入します。 CDN リンクを通じて導入することも、ローカルの jQuery ファイルをダウンロードしてプロジェクトに導入することもできます。以下は、CDN リンクを介して jQuery を導入する例です。

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

次に、JavaScript コードで画面の高さを取得する関数を作成します。具体的なコードは次のとおりです。

$(document).ready(function() {
    // 获取屏幕高度
    var screenHeight = $(window).height();
    
    // 输出屏幕高度
    console.log("屏幕高度：" + screenHeight);
});

上記のコードでは、まず $(window).height() メソッドを通じて現在のブラウザ ウィンドウの高さを取得し、それを次のように割り当てます。変数screenHeight。次に、画面の高さが console.log() メソッドを通じて出力されます。

ページが読み込まれた直後に画面の高さを取得して表示したい場合は、上記のコードを $(document).ready() 関数に配置します。これにより、DOM がロードされた後に画面の高さを取得する操作が確実に実行されます。

ブラウザ ウィンドウのサイズが変更された場合、resize イベントをリッスンすることで、最新の画面の高さを即座に取得することもできます。

$(window).resize(function() {
    var screenHeight = $(window).height();
    console.log("窗口高度已更新为：" + screenHeight);
});

上記のコード例を通して、 jQuery を使用して画面の高さを簡単に取得し、必要に応じてリアルタイムで更新できます。この方法はシンプルで使いやすく、さまざまな Web 開発シナリオに適しています。

以上がjQueryで簡単に画面の高さを取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。