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

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

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

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

もし、要素の内側の幅までではなく、要素の外側(borderまで)の幅までを取得したい場合はoutWidth()を使用しましょう。

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

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

⚫︎ 指定した要素の外側の幅を取得/設定する方法

ハルトさん

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

さとみさん

はい!
お願いします!

innerWidth()とは

innerWidth()とは最初の要素の内部の横幅を取得するメソッドとなります。
ここでいう内部の横幅とは、borderは除き、paddingは含んだ値となります。

innerWidth()の書き方

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

パラメータ

⚫︎ :
設定したい内側の横幅の値を指定する
⚫︎ 関数:
設定したい内側の横幅の値を関数の戻り値で指定する

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

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

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

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

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

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

sample.html

index.js

出力結果

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

さとみさん

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

ハルトさん

そうですよね。
innerWidth()の値 = 要素自体の横幅 + 左右のpaddingの値(marginの値とborderの値は含まれない)となります。
その為、サンプルコードでは631 + 20 + 20で671px、547 + 20 + 20で587pxとなります。

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

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

sample.html

index.js

出力結果

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

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

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

sample.html

index.js

出力結果

innerWidth()メソッドのパラメータに関数を指定することで、戻り値を設定して要素の内側の幅を設定しています。
そのため、切り替えボタンを押すことで要素の内側の幅が切り替わります。

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

指定した要素の外側の幅を取得/設定するにはjQueryのouterWidth()を使用します。

sample.html

index.js

出力結果

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

さとみさん

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

ハルトさん

そうですね。
outerWidth()の値 = 要素自体の横幅 + 左右のpaddingの値 + borderの値(marginの値は含まれない)となります。
その為、サンプルコードでは659 + 20 + 20 + 2 + 2で703pxとなります。

今回のポイント

innerWidth()で指定した要素の内側の幅を取得/設定

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

⚫︎ innerWidth()メソッドのパラメータには値や関数を指定する

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

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

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

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

関連記事

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

Writer
壷井

壷井

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

最新の案件情報

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