jQueryのwidth,height系メソッドの違いについて

2014年02月10日

jQueryには横幅とか高さを取得するメソッドがあってよく使うしすげー便利なんだけど、paddingも含めたいとかmarginも含めたいとか色々状況によって取得したい値が変わるんだけどイマイチ使い分けが覚えられないからメモ。

各メソッド

メソッド 範囲
width() コンテンツ部分の横幅
innerWidth() padding含む横幅
outerWidth() border含む横幅
outerWidth(true) margin含む横幅
height() コンテンツ部分の高さ
innerHeight() padding含む高さ
outerHeight() border含む高さ
outerHeight(true) margin含む高さ

何となく言葉の印象だと、innerWidth()がコンテンツの中身だけを取得して、width()がpaddingも含む、とかそういうイメージだからかよく間違えてた。これでもう間違えないね!!

サンプル

width:300px;
height:200px;
padding:10px;
border:4px solid #ccc;
margin:5px;
  • width():
  • innerWidth():
  • outerWidth():
  • outerWidth(true):
  • height():
  • innerHeight():
  • outerHeight():
  • outerHeight(true):

他にこんな事も書いてます

FBでコメント

この記事はコメント、トラックバックおよびピンバックを受け付けていません。