ywork2020.com

Title

パディング領域を含む要素の高さを操作する

目次 (INDEX)

innerHeight とは

ここで説明する innerHeight とは次の語句からなる jQuery のメソッドです。
inner
読み: インナー
意味: 内、内部
height
読み: ハイト
意味: 高さ

目次に戻る

innerHeight メソッドの概要

このメソッドは要素のパディング領域とコンテンツボックスを含む高さを操作することができます。

反対の言い方をすると、要素が持つマージン領域とボーダー領域を除いたものの高さを操作できるということです。

目次に戻る

構文

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

var innerHeight = $(Selector).innerHeight();
$(Selector).innerHeight(value);
$(Selector).innerHeight(function);
  • メソッドの引数を空にすることで高さを取得します。
  • メソッドの引数に数値、または文字数字を与えることで高さを設定します。
  • メソッドの引数に関数の戻り値を利用することもできます。

目次に戻る

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

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

idChild には、あらかじめ CSS で要素のコンテンツボックスの高さを 200px 、パディングを 20px に設定しておき、 innerHeight() で値を取得してみました。確認のために比較する値が必要でしたので 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>
  • 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="idInnerHeight">innerText</output>
</body>
  • 05: div要素 (親要素です。このサンプルでは特別な意味を持ちません。)
  • 06: div要素 (子要素です。この要素の高さを取得します。)
  • 08: output要素 (jQueryでheightの値を出力します。)
  • 09: output要素 (jQueryでinnerHeightの値を出力します。)
サンプルコード: script
<script>
	$(document).ready(function(){
		$("#idHeight").text("height="+$("#idChild").height());
		$("#idInnerHeight").text("innerHeight="+$("#idChild").innerHeight());
	},false);
</script>
  • 02: Docment.ready (DOMの読込みが完了した時点で関数を呼びます。)
  • 03: 関数の内容 (height()メソッドの結果をidHeightに出力します。)
  • 04: 関数の内容 (innerHeight()メソッドの結果をidInnerHeightに出力します。)
実行結果:
innerText
innerText
領域見本:
margin
padding
content-box

結果は要素のコンテンツボックスの高さをCSSの box-sizing プロパティが初期値の状態のままで、 height プロパティを200pxに設定しているので、jQueryの height() メソッドで高さを取得すれば200という値が返ってきています。 また、CSSで padding を20pxに設定しているので、コンテンツボックスの上下には20pxずつの余白が生成されています。 これをinnerHeight()で取得するとコンテンツボックスの高さとパディングの上下の高さを足した240という値が返ってきています。

目次に戻る