【jQuery】指定した要素の高さや横幅を取得する方法の一覧!

指定した要素の高さや横幅を取得するにはheight()やwidth()を使用することが多いかもしれませんが、innerWidth()やinnerHeight()、outerWidth()やouterHeight()など様々な方法で取得することができます。

例えば、要素の高さや横幅を取得するにはheight()やwidth()を使用しますが、padding込みで取得したい場合はinner系を、border込みで取得したい場合はouter系を使用します。

その為、高さや横幅を取得する方法をまとめてみましたので、もし要素の高さや横幅を取得する場合にこのページが参考になればと思います。

今回は、jQueryで指定した要素の高さや横幅を取得する方法の一覧について以下の内容で解説していきます。

⚫︎ height()で要素の高さを取得する場合
⚫︎ innerHeight()で要素の内側の高さを取得する場合
⚫︎ outerHeight()で要素の外側の高さを取得する場合

⚫︎ width()で要素の横幅を取得する場合
⚫︎ innerWidth()で要素の内側の横幅を取得する場合
⚫︎ outerWidth()で要素の外側の横幅を取得する場合

指定した要素の高さを取得する方法の一覧

指定した要素の高さを取得する方法の一覧を紹介します。

height()で要素の高さを取得する場合

height()で要素の高さを取得してみます。

sample.html

index.js

実行結果

height()で要素の高さのみを取得してみます。

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

innerHeight()で要素の内側の高さを取得する場合

<

innerHeight()で要素の内側の高さを取得してみます。

sample.html

index.js

実行結果

innerHeight()でpaddingを含めた内側の高さを取得しています。

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

outerHeight()で要素の外側の高さを取得する場合

outerHeight()で要素の外側の高さを取得してみます。

sample.html

index.js

実行結果

outerHeight()でpaddingとborder含めた内側の高さを取得しています。

jQueryのouterHeight()ついて詳しく知りたい場合はこちらをご参考ください。

指定した要素の横幅を取得する方法の一覧

指定した要素の横幅を取得する方法の一覧を紹介します。

width()で要素の横幅を取得する場合

width()で要素の横幅の取得を行ってみます。

sample.html

index.js

実行結果

width()で要素の横幅のみを取得してみます。

jQueryのwidth()ついて詳しく知りたい場合はこちらをご参考ください。

innerWidth()で要素の内側の横幅を取得する場合

innerWidth()で要素の内側の横幅の取得を行ってみます。

sample.html

index.js

実行結果

innerWidth()でpaddingを含めた内側の横幅を取得しています。

jQueryのinnerWidth()について詳しく知りたい場合はこちらをご参考ください。

outerWidth()で要素の外側の横幅を取得する場合

outerWidth()で要素の外側の横幅の取得を行ってみます。

sample.html

index.js

実行結果

outerWidth()でpaddingとborder含めた内側の横幅を取得しています。

今回のポイント

指定した要素の子要素を取得するには様々な方法がある

⚫︎ 指定した要素の高さを取得するにはheigth()innerHeight()outerHeight()がある

⚫︎ 指定した要素の横幅を取得するにはwidth()innerWidth()yやouterWidth()がある

Writer

Soshi

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

最新の案件情報