【jQuery】height()を使って要素の高さを取得/設定する!

要素の高さを取得/設定するにはjQueryのheight()を使用します。

jQueryのheight()とは指定した要素の高さを計算したり変更したりするメソッドであり、要素の高さを設定したり、取得したい場合に使用します。

そして、height()のパラメータに関数を使用することで、「500px以下の場合は高さを変更しない」などのように条件など何かしらの処理をした後に要素の高さを設定したり、取得したりすることができます。

また、css(“height”);を使うと「200px」のように高さの値を取得することができますが、height()を使用すると「200」というように数値のみを取得することができます。

今回は、jQueryのheight()を使って要素の後に新しい要素を挿入する方法について以下の内容で解説していきます。

⚫︎ 要素の高さを取得する場合
⚫︎ 要素の高さを設定する場合
⚫︎ 条件などを設定して要素の高さを設定する場

⚫︎ css(“height”)とheight()の違い

ハルトさん

今回はjQueryのheight()で要素の高さを取得/設定する方法について説明していきます。

さとみさん

お願いします!

height()とは

height()とは、指定した要素の高さを計算したり変更したりするメソッドとなります。

height()の書き方

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

パラメータ

⚫︎ 高さの値:
セレクタの高さの値を指定する
⚫︎ 関数:
単位で設定したい高さを戻り値で返す関数を指定する

height()をパラメータ無しで使用することで、セレクタの高さの値を取得するようになります。
また、パラメータに高さの値を指定することで、セレクタが指定した高さの値に設定されます。

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

要素の後に新しい要素を挿入するサンプルコードを紹介します。

要素の高さを取得する場合

要素の高さを取得する場合は、height()のパラメータ無しで使用します。

sample.html

style.css

index.js

出力結果

height()をパラメータなしで使用することで、要素の高さを取得することができます。
その為、ボタンを押すと要素の高さの値が表示されます。

要素の高さを設定する場合

要素の高さを設定する場合はheight()のパラメータに高さの値を指定します。

sample.html

index.js

index.js

出力結果

height()のパラメータに高さの値を指定することで、要素の後に複数の新しい要素を挿入することができます。
その為、ボタンを押すと指定した要素の高さが変更されます。

条件などを設定して要素の高さを取得/設定する場合

条件などを設定して要素の高さを取得/設定する場合はheight()のパラメータに関数を指定します。

sample.html

style.css

index.js

出力結果

height()のパラメータに関数を指定することで、条件などを指定して要素の高さを取得/設定できます。
その為、ボタンを押すと、高さが100px以下の場合は10pxずつ増え、100pxより大きい場合は高さが100pxずつ増え、背景色が変更されます。

css(“height”)とheight()の違い

css(“height”)とheight()はどちらも要素の高さを取得しますが、取得する際に少しの違いがあります。
それは、「単位まで取得するかしないか」です。

sample.html

style.css

index.js

出力結果

css(“height”)ではheightのプロパティ値を取得しますが、height()の場合は値のみを取得します。
その為、btnAを押すと「高さの数値 + px」が表示され、btnBを押すと「高さの数値のみ」が表示されます。

さとみさん

css(“height”)では「100px」を取得していますけど、height()では「100」を取得していますね!

ハルトさん

css(“height”)ではheightのプロパティ値を取得しますが、height()の場合は値のみを取得するようになります。
そのため、要素の高さの数値をどこかで使用したい場合にはheight()で要素の高さを取得すると良いですよ。

今回のポイント

height()で要素の高さを取得/設定

⚫︎ 要素の高さを取得/設定するにはjQueryのheight()を使用する

⚫︎ 要素の高さを指定するにはheight()メソッドをパラメータ無しで使用する

⚫︎ 要素の高さを設定するにはheight()メソッドのパラメータに高さの値(pxや%やautoなど)を指定する

⚫︎ 条件などを指定して要素の高さを取得/設定する場合はheight()のパラメータに関数を指定する

⚫︎ css(“height”)とheight()の違いは要素の高さの値を単位まで取得するかしないかである

関連記事

jQueryのwidth()で要素の横幅を取得/設定する方法についてはこちらをご参考ください。

Writer

ST

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

最新の案件情報