2017/8/4更新

jQueryで要素の高さ・幅を取得する：width(), height()など

jQueryには、要素の高さ・幅を取得するメソッドが複数用意されています。これらの違いなどを含めて説明します。

jQueryで高さ・幅を取得する４タイプ８つのメソッド

HTMLの要素の高さを取得するメソッドには、height(), innerHeight(), outerHeight()の３つがあり、同じく幅を取得するメソッドにはwidth(), innerWidth(), outerWidth()の３つがあります。

これらのメソッドの違いは、paddingやmargin、borderの値を含めるかにあります。

図で説明する各メソッドの違い

高さを取得するメソッドについて、図で説明すると以下のようになります。

jquery-width-height

次から、より詳しく説明していきます。

width(), height()

取得する値：コンテンツ

CSSなどで指定したwidthとheightの値を取得します。また、他のメソッドとは異なりwidthとheightを指定して変更することができます。

innerWidth(), innerHeight()

取得する値：コンテンツ + padding

widthとheightに加えて、paddingを含めた値を取得します。

outerWidth(), outerHeight()

取得する値：コンテンツ + padding + border

widthとheightに加えて、paddingとborderを含めた値を取得します。

outerWidth(true), outerHeight(true)

取得する値：コンテンツ + padding + border + margin

また、outerWidth()とouterHeight()は引数にtrueを渡すと、marginも含めた値を取得できます。

サンプル

以下のように、CSSで幅やmargin, padding, borderが指定された要素があるとします。

<div id="box">コンテンツ</div>

<style type="text/css">
#box {
  height: 50px;
  width: 50px;
  padding: 10px;
  border: solid 5px #000;
  margin: 10px;
}
</style>

<div id="box">コンテンツ</div>

#box {

height: 50px;

width: 50px;

padding: 10px;

border: solid 5px #000;

margin: 10px;

}

</style>

この要素に対して幅をそれぞれ取得すると以下のようになります。

$("#box").width();          //=>50px
$("#box").innderWidth();    //=>60px
$("#box").outerWidth();     //=>65px
$("#box").outerWidth(true); //=>75px

$("#box").width(); //=>50px

$("#box").innderWidth(); //=>60px

$("#box").outerWidth(); //=>65px

$("#box").outerWidth(true); //=>75px

これらの違いは非常にややこしいですが。間違えるとデザインが崩れてしまうこともあるので気をつけてください。

jQuery