jQueryでWindowやコンテンツの高さや幅を取得する方法

jQueryでWindowやコンテンツの高さや幅を取得する方法です。

トップページのファーストビュー時に画面いっぱいに画像が表示されるページを見かけますがそういうことも出来ます。

またコンテンツの幅や高さを一番大きいものに合わせるなんてことも出来ます。

Windowのサイズを取得

Windowのサイズってどこからどこまで？

今回取得するWindowのサイズというのは上の画像の赤枠のことを言います。

ブラウザのタブやブックマークバーなどは入りません。

※右端のスクロールバーは入るかも・・・

Windowの高さを取得

var height = $(window).height();

jQueryでWindowの高さを取得する書き方です。

Windowの幅を取得

var width = $(window).width();

jQueryでWindowの横幅を取得する書き方です。

コンテンツのサイズを取得

コンテンツ部分はちょっとだけやっかいです。

コンテンツ部分には、コンテンツエリア以外にpadding、border、margin があります。

どの範囲のサイズを取得したいかによって若干書き方が変わってきます。

 

サンプルのHTMLとCSSを用意しました。

<div id="idname"></div>

#idname {
  margin: 30px;
  padding: 40px;
  border: 20px solid #666;
  height: 150px;
  width: 200px;
}

上のサンプルを元に解説します。

contentを取得

var height = $("#idname").height(); // 高さを取得
var width = $("#idname").width(); // 横幅を取得

コンテンツ部分の高さや横幅を取得する方法です。

height には 150 が入ります。

width には 200 が入ります。

content + padding を取得

var height = $("#idname").innerHeight(); // 高さを取得
var width = $("#idname").innerWidth(); // 横幅を取得

paddingも含む高さや横幅を取得する方法です。

height には 230 が入ります。

width には 280 が入ります。

content + padding + border を取得

var height = $("#idname").outerHeight(); // 高さを取得
var width = $("#idname").outerWidth(); // 横幅を取得

border の太さも含む高さや横幅を取得する方法です。

height には 270 が入ります。

width には 320 が入ります。

content + padding + border + margin を取得

var height = $("#idname").outerHeight(true); // 高さを取得
var width = $("#idname").outerWidth(true); // 横幅を取得

margin も含む高さや横幅を取得する方法です。

height には 330 が入ります。

width には 380 が入ります。

まとめ

セレクタで指定した要素の高さを取得するには height() を使う。

セレクタで指定した要素の横幅を取得するには width() を使う。

padding も含めたコンテンツのサイズを取得するには innerHeight() や innerWidth() を使う。

border も含めたコンテンツのサイズを取得するには outerHeight() や outerWidth() を使う。

margin も含めたコンテンツのサイズを取得するには outerHeight(true) や outerWidth(true) と書く。