アド企画 制作部
アド企画 制作部
 

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

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

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も含まない

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

jQueryのinnerHeightやouterWidthメソッド

実際のコード

ここでは、複数の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箱の高さが取得できない!の原因1】