jQueryオブジェクト .height()

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メソッドには、以下に示す引数を指定できる。

size

要素の高さを数値で指定する。pxやem等の単位も使用できる。

function

要素の高さを戻り値として返す関数を指定する。

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>

関連記事

• CSS height
• jQuery after()
• jQuery animate()
• jQuery each()
• jQuery empty()
• jQuery hide()
• jQuery text()
• jQuery width()

参考文献

OpenJS Foundation (2025) .height() | jQuery API Documentation