ywork2020.com

Title

マージンやボーダー領域を含む要素の高さを操作する

目次 (INDEX)

outerHeight とは

ここで説明する outerHeight とは次の語句からなる jQuery のメソッドです。
outer
読み: アウター
意味: 外、外側
height
読み: ハイト
意味: 高さ

目次に戻る

outerHeight メソッドの概要

このメソッドはマージン領域やボーダー領域を含む要素の高さを取得、または設定することができます。

つまり、ボーダーの上辺と下辺の高さ + パディングの上辺と下辺の高さ + コンテンツボックスの高さの総和を求めたり、設定することができるということです。

またメソッドの引数に true を指定することでマージン領域の高さも含めることができます。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

このメソッドの既定の引数は false です。() の中が空の場合は false の設定で高さを求めます。

$(Selector).outerHeight([includeMargin]);
$(Selector).outerHeight(value [, includeMargin]);
$(Selector).outerHeight(function);
  • includeMargin: マージン領域の高さも含めるかどうかを true か false で指定します。この引数を省略した場合、既定値の false が選択されます。
  • value: 高さを設定する場合の設定値です。
  • function: 関数の結果値を value として利用することができます。

目次に戻る

サンプルコードと実行結果

このサンプルでは div 要素を使用しています。 対象となる div 要素には idChild の識別子を設定しています。

idChild には、あらかじめ CSS で要素のコンテンツボックスの高さを 200px、パディングを 20px、ボーダーを 5px、マージンを 20px に設定しておき、 outerHeight(false) と outerHeight(true) で値を取得してみました。 確認のために比較する値が必要でしたので height() も使用して要素のコンテンツボックスの高さも取得しています。

サンプルコード: CSS
<style>
	#idParent{
		border: thin dashed currentColor;
		margin: 0;
		padding: 0;
		width: max-content;
	}
	#idChild{
		border: 5px solid ##red;
		background-color: ##khaki;
		background-clip: content-box;
		box-sizing: content-box;
		margin: 20px;
		padding: 20px;
		width: 200px;
		height: 200px;
	}
</style>
  • 09: border (要素の境界線: 5px)
  • 13: margin (要素の外側の余白: 20px)
  • 14: padding (要素の内側の余白: 20px)
  • 16: height (要素の高さ: 200px ここではコンテンツボックスの高さです。)
サンプルコード: HTML
<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
	<div id="idParent">
		<div id="idChild"></div>
	</div>
	<output id="idHeight">innerText</output><br>
	<output id="idOuterHeightFalse">innerText</output><br>
	<output id="idOuterHeightTrue">innerText</output>
</body>
  • 05: div要素 (親要素です。このサンプルでは特別な意味を持ちません。)
  • 06: div要素 (子要素です。この要素の高さを取得します。)
  • 08: output要素 (jQuery で height() の値を出力します。)
  • 09: output要素 (jQuery で outerHeight(false) の値を出力します。)
  • 10: output要素 (jQuery で outerHeight(true) の値を出力します。)
サンプルコード: script
<script>
	$(document).ready(function(){
		$("#idHeight").text("height="+$("#idChild").height());
		$("#idOuterHeightFalse").text("outerHeight(false)="+$("#idChild").outerHeight(false));
		$("#idOuterHeightTrue").text("outerHeight(true)="+$("#idChild").outerHeight(true));
	},false);
</script>
  • 02: Docment.ready (DOMの読込みが完了した時点で関数を呼びます。)
  • 03: 関数の内容 (height() の結果を idHeight に出力します。)
  • 04: 関数の内容 (outerHeight(false) の結果を idOuterHeightFalse に出力します。)
  • 05: 関数の内容 (outerHeight(true) の結果を idOuterHeightTrue に出力します。)
実行結果:
innerText
innerText
innerText
領域見本:
margin
padding
content-box

結果は要素のコンテンツボックスの高さを CSS の box-sizing プロパティが初期値の状態のままで、 height プロパティを 200px に設定しているので、jQuery の height() メソッドで高さを取得すれば 200 という値が返ってきています。 また、CSS で marginpadding を 20px に設定しているので、コンテンツボックスの上下には合わせて 40px の余白があり、ボーダー領域の外側にも上下合わせて 40px の余白が生成されています。 また、 border で境界線の幅を 5px に設定しているので上下のボーダー領域を合わせると 10px です。

これを outerHeight(false) で取得するとコンテンツボックスの高さ 200px とパディングの上下辺の高さ 40px とボーダーの上下辺の高さ 10px を足した 250 という値が返ってきています。 outerHeight(true) の場合は outerHeight(false) の戻り値である 250 とマージン領域の上下辺の高さ 40px を足した 290 という値が返ってきています。

目次に戻る