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

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

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

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

指定した要素の外側の高さを設定する場合、取得した要素全体の高さが調整されると思いがちですが、paddingとborder値はそのままになり、要素自体の高さが自動で調整されるようになります。

また、高さを取得するためのメソッドはheight()メソッドやinnerHeight()メソッドなどもありますが、どの値までの高さを取得するのかで変わってきますので、使い分できるようにしましょう。

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

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

⚫︎ outerHeight()とinnerHeight()とheight()の違い

ハルトさん

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

さとみさん

はい!
お願いします!

outerHeight()とは

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

outerHeight()の書き方

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

パラメータ

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

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

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

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

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

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

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

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

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

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

sample.html

index.js

出力結果

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

インライン要素はそのままの状態で幅や高さを変更することができない為、見た目は変わりませんが数値上では変更されています。

さとみさん

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

ハルトさん

そうですね。
outerHeight()の値 = 要素自体の高さ + 上下のpaddingの値 + borderの値(marginは含まれない)となります。
その為、サンプルコードでは 「80 + 20 + 20 + 2 + 2」で124pxとなります。
インライン要素の場合も見た目の高さは変わっていませんが、数値を見ると「80 + 20 + 20 + 2 + 2」で124pxとなっています。

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

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

sample.html

index.js

出力結果

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

さとみさん

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

ハルトさん

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

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

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

sample.html

style.css

index.js

出力結果

outerHeight()のパラメータに関数を指定することで戻り値を設定して要素の外側の高さを設定することができます。

その為、ボタンを押すと10pxずつ増加し100までいくと「高さが100になりました!」という文字が表示され、150までいくと「高さが150になりました!」という文字が表示され、50px減少します。

outerHeight()とinnerHeight()とheight()の違い

要素の高さを取得/設定するにはouterHeight()メソッドの他にもinnerHeight()メソッドやheight()メソッドがありますが、それぞれ使い分けできるようにしましょう。

outerHeight()とinnerHeight()とheight()の違いをサンプルコードを使って紹介します。

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

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

sample.html

style.css

index.js

出力結果

それぞれのメソッドの取得した値を確認してみます。

⚫︎ heightメソッド: 80
(要素自体の高さが80pxである為)
⚫︎ innerHeightメソッド: 120
(要素自体の高さとpadding値を合わせると120pxである為)
⚫︎ heightメソッド: 124
(要素自体の高さとpadding値とborder値を合わせると124pxである為)

今回のポイント

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

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

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

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

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

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

Writer
壷井

壷井

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

最新の案件情報

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