jQueryオブジェクトのheightメソッドを使うと、HTML要素の高さを取得したり、HTML要素の高さを設定できる。
HTML要素の高さを取得する。
jQueryObject.height()
jQueryオブジェクトが複数のHTML要素にマッチする場合は、最初にマッチした要素の高さを取得する。
HTML要素の高さを設定する。
jQueryObject.height(size)
jQueryObject.height(function)
jQueryオブジェクトが複数のHTML要素にマッチする場合は、複数の要素の高さを取得または設定できる。
HTML要素の高さを取得するとき(=引数を省略したとき)は、HTML要素の高さを数値で返す。
HTML要素の高さを設定するとき(=引数を指定したとき)は、マッチしたHTML要素のjQueryオブジェクトを返す。
jQueryオブジェクトのheightメソッドには、以下に示す引数を指定できる。
function()
function(index)
function(index, height)
jQueryオブジェクトが複数のHTML要素にマッチすることがある。それらを区別するため、マッチした要素のインデックス番号(0始まり)が第1引数 index に渡される。
変更前の高さが第2引数 height に渡される。
jQueryオブジェクトのheightメソッドの使用例を以下に示す。
画像の高さを取得する例を次に示す。
<img src="portrait.jpg" id="portrait1">
<p>height: <span id="height"></span></p>
<script>
const height = $('#portrait1').height();
$('#height').html(height);
</script>
height:
画像の高さを数値で設定する例を次に示す。
<img src="portrait.jpg" id="portrait2">
<script>
$('#portrait2').height(200);
</script>
画像の高さを関数で設定する例を次に示す。
<img src="portrait.jpg" id="portrait3">
<script>
$('#portrait3').width(function() {
return 100;
});
</script>
OpenJS Foundation (2025) .height() | jQuery API Documentation