ホームページ > 記事 > ウェブフロントエンド > 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 サイトの他の関連記事を参照してください。