jQueryで要素の幅や高さを取得したい場合、考慮しないといけないこと・・・

それはマージンやパディングを含むかどうかで幅や高さも変わるということ

そのためjQueryでは要素のサイズを取得するメソッドが色々あります。

ここではその幅や高さの取得に使える７つのメソッドとコード例を紹介

幅・高さを取得するメソッドまとめ

そのメソッドは次の７つ

• .width()   ，.height()
• .innerWidth()   ，.innerHeight()
• .outerWidth()   ，.outerHeight()
• .css()

これらメソッドの使い方は次の通りです。

.width()   ，.height()

この２つは要素の純粋な幅と高さを取得するためのメソッド

余計なマージンやパディングは一切含みません。

次のように呼び出しした場合、単位なしの幅や高さが返ってきます。

なのでもし本当に要素のサイズだけ知りたいなら width  または height  を使うのが確実

.innerWidth()   ，.innerHeight()

この２つはパディングを含む要素の幅と高さを取得するためのメソッド

パディングだけなのでマージンやボーダー（枠線）は含まないことに注意です。

使い方は普通に要素に対して呼び出すだけ

こちらもpxなどの単位なしの数値が返ってきます。

また次のようにパディングを数値として取得するのにも使用可能

もちろんcssメソッドを使ってもパディングは取得できます。

ただpxなどの単位付きで返されてしまうので、数値を扱うならこっちの方が便利かも

.outerWidth()   ，.outerHeight()

この２つは要素の次の領域を含む幅や高さを取得するためのメソッド

• マージン領域
• パディング領域
• ボーダー（枠）領域

マージンを含むだけでなく、ボーダーも含んでいます。

なので本当に要素が画面上で占めるサイズを知りたい場合はこちらを使うのがベスト

使い方ですが、こちらも要素に対して呼び出すだけです。

幅や高さが単位なしの数値として返ってきます。

このメソッドで注意しないといけないのはボーダーまで含むことです

なのでマージンを計算するのにこれらのメソッドが使えないことに要注意

cssメソッド

最後に紹介するcssメソッドは要素のCSSプロパティを取得するためのメソッド

これを使ってwidthプロパティとheightプロパティを調べれば幅・高さを取得できます。

返されるのは純粋な幅や高さなので width()  と height()  と変わりません。

ただし返される値には「px」や「%」などの単位が含まれる点に注意が必要です。

使い方はこのメソッドに 'width'  または 'height'  を渡すだけ

上のコードのように返ってくるのは「300px」などの単位付きのサイズ

なので数値計算する場合はcssメソッドはあまり向いてません。

数値として扱うなら今まで紹介したメソッドを使った方が楽です。

ここまでのまとめ

ということで幅や高さを取得するメソッドまとめ

• .width()   ，.height()
  パディングやマージン、ボーダーを含まない要素の幅・高さを数値で返す
• .innerWidth()   ，.innerHeight()
  パディングを含む要素の幅・高さを数値として返す
• .outerWidth()   ，.outerHeight()
  パディングにやマージン、ボーダーも含む幅や高さを数値で返す
• .css()
  'width'  または 'height'  を渡すことで単位付きの幅や高さを返す

パディングやマージン、ボーダーまで含むかどうかで使い分けると便利です。

以上jQueryで幅・高さが取得できるメソッドについてでした。