jQueryでのウィンドウサイズの取得方法【現役エンジニアが解説】

PROGRAM

今回は、jQueryでのウィンドウサイズの取得方法について、簡単に解説していきます。

ウィンドウサイズの取得方法

jQueryではwidthメソッドやheightメソッドで純粋なコンテンツサイズを取得できます。

これらで取得できるウィンドウサイズはスクロールバーを含まないウィンドウサイズになります。

$(window).width();
$(window).height();

上記のコードでは、$(window)に対してwidthメソッドやheightメソッドを使用することで、ウィンドウサイズを取得しています。

参考:innerWidth()とinnerHeight()

ウィンドウサイズについてはwidthメソッドとheightメソッドで十分です。

参考までにinnerWidthメソッドとinnerHeightメソッドではborderを含まない要素のサイズを取得できます。

$('#hoge').innerWidth();
$('#hoge').innerHeight();

上記のコードの例では、innerWidthメソッドやinnerHeightメソッドを使ってhogeというidを持つ要素のborderを含まないサイズを取得しています。

参考:outerWidth()とouterHeight()

outWidthメソッドとouterHeightメソッドでborderを含む要素のサイズを取得可能です。

さらに、引数をtrueとすることで、marginを含む要素のサイズを取得することもできます。

$('#hoge').outerWidth();
$('#hoge').outerHeight();

上記の例では、hogeのidの要素のborderを含むがmarginは含まないサイズを取得しています。