heightメソッド

heightメソッドは要素の高さを取得および変更することができます。重要な点は、'計算された値' (computed height) を取得するということです。 css('height')メソッドとは異なり、このメソッドは単位のない数値 (例: 400) を返し、数値計算に便利です。このメソッドはCSSプロパティ box-sizingの指定に関係なく、要素のコンテンツの高さを取得します。余計な計算を避けるためには、 css('height')の使用が推奨されます。計算誤差は、ユーザーがページのサイズを変更した場合や、要素またはその親要素が非表示の場合にも発生することがあります。高さの値は、パディングやボーダーの値を考慮しません。

構文

要素の高さを取得します。状況によっては、取得した値が小数になることがあります:

$(セレクタ).height();

要素の高さを変更するには、数値 (例: 400) を渡すことができます。その場合、単位はピクセルになります。または、単位を指定した文字列 (例: '10em') を渡すこともできます:

$(セレクタ).height(新しい値);

また、セット内の各要素に対して指定された関数を適用することもできます。この場合、関数の最初のパラメータはセット内での要素のインデックスを受け取り、 2番目のパラメータはその要素の現在の高さの値を受け取ります。関数内のthisは現在の要素を指します。

要素の高さの値は、関数が返す値に変更されます:

$(セレクタ).height(function(セット内のインデックス, 現在の高さの値));

例

#testをクリックしたときに、 heightメソッドを使用してその高さを30pxに変更し、さらにcssを使用して背景色を緑に変更してみましょう:

<div id="test"></div>

#test {
	width: 50px; 
	height: 90px;
	background: red; 
	color: white;
	margin-top: 10px; 
	cursor: pointer;
}

$('#test').one('click', function() {
	$(this).height(30).css({
		cursor: 'auto',
		backgroundColor: 'green'
	});
});

heightメソッド

構文

例

関連項目