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;
height:200px;
padding:10px;
border:4px solid #ccc;
margin:5px;
- width():
- innerWidth():
- outerWidth():
- outerWidth(true):
- height():
- innerHeight():
- outerHeight():
- outerHeight(true):
他にこんな事も書いてます
- JavaScript祭スピンオフ! フロントエンド祭り in Co-Edo でオブジェクトベースのJSについて話してきた
- 第5回 HTML5minutes! で話してきた
- 秋のJavaScript祭りで話をしてきた
- Mac OS X zsh で cd したら同時に ls -GAF するエイリアスコマンド
- 春のJavaScript祭りでAngularJSについてお話ししてきました
- ローカルマシンにNode.jsをインストール
- jQueryでChromeの場合$(function(){]); が画像読み込み前に実行される場合の対応
- AngularJSでページロード時にコンパイル前のタグが表示されるのを防ぐ
- スクロールで隠れるナビゲーションメニューのJSがステキだったので勝手にプラグイン化しました
- スペースキーでスクロールする人のためのjQueryプラグイン作った
この記事の分類
種類: 徒然
ジャンル: javascript jQuery TIPS
FBでコメント