string(11) "3.239.76.25"

2022年04月29日

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

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

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

 


メソッド

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

 


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

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

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

区分 メソッド 解説


width() 要素の横幅を数値で返します
innerWidth() [padding領域]を含む要素の横幅を数値で返します
outerWidth() [padding領域+border幅]を含む要素の横幅を数値で返します
outerWidth(true) [margin領域+padding領域+border幅]を含む要素の横幅を数値で返します
高さ
height() 要素の高さを数値で返します
innerHeight() [padding領域]を含む要素の高さを数値で返します
outerHeight() [padding領域+border幅]を含む要素の高さを数値で返します
outerHeight(true) [margin領域+padding領域+border幅]を含む要素の高さを数値で返します

 


利用事例

①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メニュでない場合はコンテンツ書き出し位置のpositionrelativeで無いので終了します。

■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).width() 同じ値

スクロールバーを含めないコンテンツ領域の幅を返します。

$(window).innerWidth()
$(window).outerWidth()
$(window).outerWidth(true)
高さ $(window).height() 同じ値

スクロールバーを含めないコンテンツ領域の高さを返します。

$(window).innerHeight()
$(window).outerHeight()
$(window).outerHeight(true)

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

 

関数一覧
  • 1.JavaScript/jQueryとは
  • 2.[JS] 変数規則と文字連結
  • 3.[JS] if文
  • 4.[JS] 配列操作
  • 5.[JS] 文字列操作
  • 6.[JS] 画面情報&操作
  • 7.[JS] Timer処理
  • console.log()
  • for
  • for in
  • for of
  • indexOf()
  • join()
  • length
  • map()
  • match()
  • Object.keys()
  • Object.values()
  • parseInt()
  • pop()
  • push()
  • replace()
  • shift()
  • slice()
  • split()
  • toString()
  • unshift()
  • 1.jQueryの導入と記述の基本
  • 2.jQueryの機能追加
  • 3.jQuery文法
  • 4.階層構造の要素セレクトと操作
  • 5.要素サイズ取得メソッド
  • animate()
  • append()
  • attr()
  • change(func)
  • click()
  • click(func)
  • css()
  • each(func)
  • effect()
  • empty()
  • fadeTo()
  • get()
  • hover(f1,f2)
  • html()
  • map(func)
  • mousedown(func)
  • prop()
  • resize(func)
  • show()、hide()
  • slideToggle()
  • submit()
  • submit(func)
  • text()
  • toggle()
  • toggleClass()
  • val()