jqueryでページの幅と高さを取得する方法

フロントエンド開発では、ページのサイズに応じてページをレイアウトしたり動的に調整したりするために、ページの幅と高さを取得する必要があることがよくあります。 jQuery では、次のメソッドでページの幅と高さを取得できます。

1. .width() メソッドと .height() メソッドを使用してページの幅と高さを取得します

jQuery には、.width() と .height を含む一連のサイズ取得メソッドが用意されています。 () 要素の幅と高さを取得するメソッド。ドキュメント ページ全体については、body 要素の幅と高さを取得することでページのサイズを取得できます。サンプルコードは次のとおりです。

var pageWidth = $('body').width();
var pageHeight = $('body').height();
console.log('页面宽度：' + pageWidth + '，页面高度：' + pageHeight);

ページが動的調整状態にある可能性があるため、取得されたページ サイズが最終的なサイズではない場合があることに注意してください。最終的なページ サイズを取得するには、上記のコードをウィンドウ ロード イベントでラップし、サイズを取得する前にページが完全にロードされていることを確認します。サンプル コードは次のとおりです。

$(window).load(function(){
    var pageWidth = $('body').width();
    var pageHeight = $('body').height();
    console.log('页面宽度：' + pageWidth + '，页面高度：' + pageHeight);
});

2. $(window) オブジェクトを使用して、ページの幅と高さを取得します。

もう 1 つの方法は、$(window) オブジェクトを使用して、ページの幅と高さを取得します。 $(window) オブジェクトはブラウザ ウィンドウ オブジェクトを表すため、このオブジェクトを通じて現在のウィンドウ サイズ (ページのサイズ) を取得できます。サンプル コードは次のとおりです。

var pageWidth = $(window).width();
var pageHeight = $(window).height();
console.log('页面宽度：' + pageWidth + '，页面高度：' + pageHeight);

取得されたページ サイズが最終的なサイズではない可能性があることにも注意してください。そのため、ページが確実に読み込まれるように、上記のコードをウィンドウ読み込みイベントにラップすることもできます。サイズを取得する前に完全にロードされます。サンプル コードは次のとおりです:

$(window).load(function(){
    var pageWidth = $(window).width();
    var pageHeight = $(window).height();
    console.log('页面宽度：' + pageWidth + '，页面高度：' + pageHeight);
});

3. document.documentElement.clientWidth と document.documentElement.clientHeight を使用してページの幅と高さを取得します

ページの幅と高さを取得する別の方法document.documentElement.clientWidth プロパティと document.documentElement.clientHeight プロパティを使用することです。これら 2 つのプロパティは、それぞれ、現在の Web ページの表示領域であるドキュメント ビューポートの幅と高さを表します。コード例は次のとおりです。

var pageWidth = document.documentElement.clientWidth;
var pageHeight = document.documentElement.clientHeight;
console.log('页面宽度：' + pageWidth + '，页面高度：' + pageHeight);

取得されたページ サイズが最終的なサイズではない可能性があることにも注意してください。そのため、ページが確実に読み込まれるように、上記のコードをウィンドウ読み込みイベントにラップすることもできます。サイズを取得する前に完全にロードされます。サンプル コードは次のとおりです。

$(window).load(function(){
    var pageWidth = document.documentElement.clientWidth;
    var pageHeight = document.documentElement.clientHeight;
    console.log('页面宽度：' + pageWidth + '，页面高度：' + pageHeight);
});

概要:

上記 3 つのメソッドによって得られる効果は、ページの幅と高さを取得することです。どの方法を使用するかは、特定のニーズとプロジェクトの現実によって異なります。ただし、注意すべき点が 1 つあります。取得されるページ サイズは最終的なサイズではない可能性があるため、サイズを取得する前にページが完全にロードされていることを確認するために、ウィンドウ読み込みイベントでコードをラップするのが最善です。

以上がjqueryでページの幅と高さを取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。