jquery：5.要素サイズ取得メソッド

ここでは要素のサイズを取得するjqueryメソッドを解説します。

コンテンツの書き出し位置が要素の表示サイズによって異なる時に利用します。

メソッド

　セレクタ.要素サイズ取得メソッド

要素サイズを取得するメソッド一覧

下図を参照してください。

要素はmargin、border(線の幅)、paddingから構成されています。そのいずれからの距離か？によって利用するメソッドは異なります。

利用事例

①FIXメニュの場合のコンテンツ表示位置を決める

メニュを固定表示にした場合、コンテンツの書き出し位置が画面サイズ等によって異なります。

このような場合は下記方法でCSSの値を変更します。

$(function(){
	if($('#header_back').css('position') != 'relative')return; // FIXメニュでない場合は終了
    var header_height = $('#header').outerHeight(true);
	$('#header_back').css('height' , header_height + 'px');
});

■FIXメニュでない場合はコンテンツ書き出し位置のpositionがrelativeで無いので終了します。

■FIXメニュの場合は#headerの高さを取得して、コンテンツの書き出し位置の高さを変更しています。

②上記に加えて、Windowをマニュアルでサイズ変更しても対応させる方法

$(function(){
	if($('#header_back').css('position') != 'relative')return; // FIXメニュでない場合は終了
    var header_height = $('#header').outerHeight(true);
	$('#header_back').css('height' , header_height + 'px');
	$(window).resize(function(){
		header_height = $('#header').outerHeight(true);
		$('#header_back').css('height' , header_height + 'px');
	});
});

上記はドキュメントの初期表示だけでなく、ユーザがwindowのサイズをマニュアルで変更した場合も位置調整を行っています。

[注意点]

①jQueryでセレクタにwindowを指定した場合

上記の事例は要素に対してのサイズを取得しましたが、セレクタにwindowを指定する事も出来ます。

しかし、この使い方は中途半端な数値が返るのでお勧めしません。

windowのサイズの取得は、JavaScriptのwindowオブジェクトを利用することをお勧めします。

■windowには[margin]も[padding]も無い為、どの関数を使っても値は同じになります