オブジェクトや画像の高さ・幅を取得したい機会はけっこう多いのですが、この「サイズ」の概念は思った以上に複雑で結構悩まされます。
取得した値が思った値じゃない！ってこと結構ありますよね。今回はそこらへんについてまとめておこうと思います。

jQuery・サイズ（幅・高さ）取得メソッドの種類

なんかうまく値がとれないぞという場合はこのあたりをもう一度整理してみる必要があります。
まずはjQuery取得できるサイズの種類を見てみましょう。

メソッド 方向 padding border margin
$('#targetObj').height(); 高さ – – –
$('#targetObj').width(); 幅 – – –
$('#targetObj').innerHeight(); 高さ P – –
$('#targetObj').innerWidth(); 幅 P – –
$('#targetObj').outerHeight(); 高さ P B –
$('#targetObj').outerWidth(); 幅 P B –
$('#targetObj').outerHeight(true); 高さ P B M
$('#targetObj').outerWidth(true); 幅 P B M

基本的にはこれらのメソッドで値が取れますが、いくつか注意点があります。
取れるはずの値がゼロであったり、予想と違う値がとれたりすることがありますので以下のようなことに気をつけてください。

  • 取得できるのは、オブジェクトにCSSや属性(画像のwidth・height)などが適用された、画面に表示中のサイズ
  • 要素が「display:none」の時、オブジェクト本体の幅・高さは0
  • オブジェクトの親・祖先の状態（display:none、height:0など）にも影響される
  • 画像の場合、読み込み完了していないタイミングでは幅・高さが0

JavaScript・Imageオブジェクトから取得する

上述のjQueryメソッドによる取得の他に、画像オブジェクト（Imageオブジェクト）から直接取得する方法もあります。
こちらの場合はオブジェクトそのもののパラメータを参照するので、取得できる値はCSSの影響はうけません。

ただし、値取得のタイミングによっては思った値が取れない場合があるのでこちらも注意が必要です。

// Imageオブジェクトの例

var imageObj = new Image();
imageObj.src = "images/sample.jpg";
メソッド 方向 padding border margin
imageObj.height; 高さ – – –
imageObj.width; 幅 – – –

Imageオブジェクトからの取得の場合の注意点は以下のとおりです。

  • 画像の場合、読み込み完了していないタイミングでは幅・高さが0
  • ロードが完了してしまった後にはimageタグに指定したwidth、height属性
  • 画像のプリロード時・onload内では画像の実寸

imageタグの属性が指定されている場合でも、Imageオブジェクトのonload内では画像の実寸を取得することができます。
以下の例は画像のプリロードを行い、コンソールログに画像の実寸を表示するサンプルの一部です。

$('img').each(function(){
var imageObj = new Image();
// 画像のプリロード処理
imageObj.onload = function(){
  // 画像の実寸の幅・高さをコンソールに表示
  console.log('Image width:' + imageObj.width + ', Image height:' + imageObj.height);
};
imageObj.src = $(this).attr('src');
});

画像の実寸を取りたいことは多々あるのですが実寸を好きなタイミングで取得するのはクロスブラウザを考えるとむずかしそうだったので今回はやめときました^^;
また余力があれば調べてみようと思います。

おわり