jQueryのinnerHeight()やouterWidth() メソッド 【div箱の高さが取得できない！の原因２】

---

HTMLで、divで作成したボックスやimgなどを配置した各種コンテンツの縦横幅を取得したい時のメモ。

jQueryを使って、各コンテンツのmarginやpaddingを含めり はぶいたりした縦幅の値を取得する事ができる

イマイチ暗記ができないので、ココにまとめてメモを残しておこうと思う。

サイズを取得するjQueryのメソッド

$('div').outerHeight({margin: true}) $('div').outerWidth({margin: true})
marginの外側までのサイズを取得する
$('div').outerHeight() $('div').outerWidth()
borderの外側までのサイズを取得する marginは含まない。
$('div').innerHeight() $('div').innerWidth()
paddingを含めたサイズ(borderの内側までのサイズ)を取得する（marginとborderを含めない）
$('div').height() $('div').width()
コンテンツのサイズを取得する paddingもborderもmarginも含まない

これで自分がどの部分のサイズを取得したいのか見つかれば、あとは楽勝である。

実際のコード

ここでは、複数のdivタグにclass="box"を設定したと想定し、一番大きなサイズのボックスに合わせる場合のコードを紹介する。

/* 一番大きいコンテンツの高さメモ用変数 */
var max_h = 0; 

/* 対象をループ */
$('div.box').each(function(){ 
	/* 高さを取得 */
	var tmp_h = $(this).height(); 
	/* max_hにメモした数値より大きい場合は、差替える */
	if(tmp_h > max_h){
		max_h = tmp_h;
	}
});

/* max_hが取得できた場合は、再度対象をループして高さを指定 */
if(max_h){
	$('div.box').each(function(){
		$(this).height(max_h);
	});
}

うまく取得できない場合

「数値は取得できるものの、何かオカシイ」という場合は、上記コードをどこで走らせているかが原因であることが多い。

もし、対象のコンテンツの中に画像が配置してあったりした場合、 $(document).ready にしかけても画像を取得する前の高さ（幅）を取得している。

たいていの場合は、$(window).load にしかければうまくいく。

$(window).load(function(){

	var max_h = 0; 
	
	$('div.box').each(function(){ 
		var tmp_h = $(this).height(); 
		if(tmp_h > max_h){
			max_h = tmp_h;
		}
	});
	if(max_h){
		$('div.box').each(function(){
			$(this).height(max_h);
		});
	}

});

処理をかける（取得する）タイミングについては、次の記事を参考にしてほしい。 jQueryで処理されるタイミング 【div箱の高さが取得できない！の原因１】

---

---