【jQuery】innerHeight()で指定した要素の内側の高さを取得/設定する!

指定した要素の内側の高さを取得/設定するにはjQueryのinnerHeight()メソッドを使用します。

jQueryのinnerHeight()とは要素の内部の高さを取得するメソッドであり、指定した要素の内側の高さ(要素の高さ + paddingの高さ)を取得したり、設定したい時に使用することができます。

そして、返り値を設定することで条件次第によって要素の内側の高さの値を設定することもできます。

指定した要素の内側の高さを設定する場合、paddingの高さと要素自体の高さが調整されると思いがちですが、paddingの値はそのままになり、要素自体の高さが自動で調整されるようになりますので注意してください。

また、要素の内側の高さまでではなく、要素の内側(borderまで)の高さまでを取得したいと思った場合はoutHeight()を使用しましょう。

今回は、jQueryのinnerHeight()メソッドを使って指定した要素の内側の高さを取得/設定する方法について以下の内容で解説していきます。

⚫︎ 指定した要素の内側の高さを取得する場合
⚫︎ 指定した要素の内側の高さを設定する場合
⚫︎ 戻り値を設定して指定した要素の内側の高さを設定する場合

⚫︎ 指定した要素の内側の高さを取得/設定する方法

ハルトさん

今回はjQueryのinnerHeight()メソッドで指定した要素の内側の高さを取得/設定する方法について説明していきます。

さとみさん

はい!
お願いします!

innerHeight()とは

innerHeight()とは指定した要素の内部の高さを取得するメソッドとなります。
ここでいう内部の高さとは、borderは除き、paddingは含んだ値となります。

その為、上記の画像の要素の内部の高さは赤線で囲まれた範囲となります。

innerHeight()の書き方

innerHeight()の書き方は下記となります。

パラメータ

⚫︎ :
要素に設定したい内側の高さの値をピクセル単位で指定する
⚫︎ 関数:
設定したい内側の高さの値を関数の戻り値で指定する

innerHeight()メソッドのパラメータに値を指定して呼び出すことで、$の()で指定したセレクタの要素の内側の高さの値を設定することができます。
そして、パラメータに関数を指定して呼び出すことで、要素の内側の高さの値を関数の戻り値として設定することができます。

また、innerHeight()メソッドをパラメータ無しで使用することで要素の内側の高さの値を取得することができます。

innerHeight()を使用する際の注意点

innerHeight()で高さを設定する際に要素自体の高さと内側の余白の全体で高さを調整されると思いがちですが、実際には内側の余白はそのままで、要素自体の高さが自動で調整されるようになりますので注意してください。

例えば、要素Aの高さが「100」pxでpaddingが上下に「20px」に設定された状態で、innerHeight()で高さを「160px」に設定するとpadding値は「20px」のままで要素Aの高さが「120」pxになります。

要素の内側の高さを取得/設定するサンプルコード

要素の内側の高さを取得/設定するサンプルコードを紹介します。

指定した要素の内側の高さを取得する場合

指定した要素の内側の高さを取得する場合はinnerHeight()メソッドをパラメータ無しで使用します。

sample.html

index.js

出力結果

innerHeight()メソッドによって、指定した要素の内側の高さの値を取得することができます。
そのため、btn1のボタンを押すとsample1クラスの内側の高さの値を、btn2のボタンを押すとsample2クラスの内側の高さの値を取得しています。

さとみさん

innerHeight()メソッドで、指定した要素の内側の高さを取得していますね!

ハルトさん

そうですね。
innerHeight()の値 = 要素自体の高さ + 上下のpaddingの値(marginの値とborderの値は含まれない)となります。
その為、サンプルコードでは 「60 + 20 + 20」で100px、「24 + 20 + 20」で64pxとなります。

指定した要素の内側の高さを設定する場合

指定した要素の内側の高さを設定する場合はinnerHeight()メソッドのパラメータにを指定します。

sample.html

index.js

出力結果

innerHeight()メソッドに値を指定することで、指定した要素の内側の高さを設定することができます。
そのため、btn1のボタンを押すとsample1クラス要素の内側の高さの値を、btn2のボタンを押すとsample2クラス要素の内側の高さの値が設定されます。

さとみさん

innerHeight()メソッドのパラメータに値を設定することで、指定した要素の内側の高さを設定していますね!

ハルトさん

そうですね。
サンプルコードのsample1クラスの要素自体の高さは40pxでsample2クラスの要素自体の高さは24pxでしたが、innerHeight()によってpaddingの値を含める値になることから要素自体の高さが自動で調整されるようになります。

戻り値を設定して要素の内側の高さを設定する場合

戻り値を設定して要素の内側の高さを設定する場合はinnerHeight()のパラメータに関数を指定します。

sample.html

index.js

出力結果

innerHeight()メソッドのパラメータに関数を指定することで、戻り値を設定して要素の内側の高さを設定しています。
そのため、要素の高さが150pxまで到達すると、「150に到着!」という文字が表示されます。

指定した要素の外側の高さを取得/設定する方法

指定した要素の内側の高さを取得/設定するにはjQueryのouterHeigt()を使用します。

jQueryのouterWidth()メソッドについて詳しく知りたい場合はこちらをご参考ください

今回のポイント

innerHeight()で指定した要素の内側の高さを取得/設定

⚫︎ 指定した要素の内側の高さを取得/設定するにはjQueryのinnerHeight()メソッドを使用する

⚫︎ innerHeight()で高さを設定する際には内側の余白はそのままになり、要素自体の高さが自動で調整されるようになる

⚫︎ 指定した要素の内側の高さを取得する場合はinnerHeight()メソッドをパラメータ無しで使用する

⚫︎ 指定した要素の内側の高さを設定する場合はinnerHeight()メソッドのパラメータにを指定する

⚫︎ 戻り値を指定して指定した要素の内側の高さを設定する場合はinnerHeight()メソッドのパラメータに関数を指定する

⚫︎ 指定した要素の内側の高さを取得/設定するにはjQueryのouterHeight()メソッドを使用する

関連記事

jQueryのheight()メソッドで要素の高さを取得/設定する方法についてはこちらをご参考ください。

Writer
壷井

壷井

株式会社flyhawkの壷井です。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語:swift、JS系(Node.js等)。好きなサーバー:AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。

最新の案件情報

フリーランスエンジニアの案件探し