ywork2020.com

Title

要素の高さを操作する

目次 (INDEX)

height とは

ここで説明する height とは次の語句からなる jQuery のメソッドです。
height
読み: ハイト
意味: 高さ、身長、標高、海抜

目次に戻る

height メソッドの概要

このメソッドは、呼び出し元のコンテンツボックスの高さを取得、または設定することができます。

これは、CSS の height プロパティでも操作できますが、 プログラムから動的に変更の必要がある場合は このメソッドを利用するか、 prop メソッドを使って height プロパティを操作する方法があります。 また、CSS の疑似クラスを利用する方法も考えられます。

目次に戻る

構文

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

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

目次に戻る

サンプルコードと実行結果 (ブラウザのウィンドウの高さを取得する)

このサンプルでは window 変数をセレクターに指定してブラウザのウィンドウの高さを取得していますが、 要素名 や id などで要素を特定すれば、要素の高さも取得することができます。

サンプルコード: HTML 
<head>
	<style>...</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
	<output id="idOutput1"> </output> px
	<script>...</script>
</body>
  • 06: output id="idOutput1" (結果を出力するための要素です。)
サンプルコード: script 
<script>
	$("#idOutput1").text( $(window).height() );
	$(window).on("resize", function(){
		$("#idOutput1").text( $(window).height() );
	});
</script>
  • 02, 04: $("#idOutput1").text( $(window).height() ) (idOutput1 のコンテンツにブラウザのウィンドウの高さを出力します。)
  • 03-05: $(window).on("resize", function(){ 処理 } (window のサイズが変更されたら { 処理 } の部分のコードが実行されます。)
実行結果:
px

PC から閲覧されている場合はブラウザのウィンドウの高さを変更することで値の変化も確認できます。

目次に戻る

サンプルコードと実行結果 (要素の高さを設定する)

ここでは、要素の高さを設定しています。

input 要素の range 型のスライダーと連動して要素の高さが変更されるサンプルです。

サンプルコード: CSS 
<style>
	#idTd{
		border: thin solid ##gray;
		height: 200px;
		vertical-align: bottom;
	}
	#idDiv{
		background-color: ##darkseagreen;
		margin: 0;
		padding: 0;
	}
</style>
サンプルコード: HTML 
<head>
	<style>...</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
	<input id="idRange" type="range" value="50" min="0" max="100">
	<output id="idOutput2">50%</output>
	<table>
		<tbody>
			<tr>
				<td id="idTd">
					<div id="idDiv"></div>
				</td>
			</tr>
		</tbody>
	</table>
	<script>...</script>
</body>
  • 12: div id="idDiv" (この要素の高さを設定します。)
サンプルコード: script 
<script>
	$("#idDiv").height( $("#idRange").val() + "%" );
	$("#idRange").on("change", function(){
		$("#idDiv").height( $("#idRange").val() + "%" );
		$("#idOutput2").text( $("#idRange").val() + "%" );
	});
</script>
  • 02, 04: $("#idDiv").height( $("#idRange").val() + "%" ); (要素の高さを設定しているコードです。)
実行結果:
50%

目次に戻る