height()で取得できない！marginやpaddingを含めた高さを取得する【jQuery】

jQueryのheight()だと実はmarginやpaddingやborderを含めた高さが取得できないってことに気づいた話

jQuery関連記事

• 

  【jQuery】pdfが存在するか、mimeタイプのバリデーションする

• 

  jQuery UIのsortableを使ってリストをドラッグで並び替える

• 

  jQueryのモーダルウィンドウを使ってフォームの確認画面を実装する

• 

  HTMLのcanvasタグとJavaScriptで円グラフの画像をつくる

• 

  bxSliderをカルーセルやコンテンツスライダーなど便利なサンプル5種

• 

  bxSliderの使い方と、オプションでのカスタマイズ方法

• 

  select・optionタグをjQueryで、プルダウンの選択値を取得、変更する

• 

  jQueryでinput[type="file"]で画像アップロード時にプレビューを表示する

• 

  jQueryでrequiredの専用エラー文と文字数制限のバリデーションをつくる

height()で取得する値

css

#box{
    height: 50px;
    width: 50px;
    padding: 10px;
    margin: 3px;
    border: 1px solid #888;
}

この要素の場合、height()で取得する値は「50」になる。
margin、padding、borderを除いた高さが取れる。

padding、borderを含めた高さを取得する。

JavaScript

$('#box').outerHeight();

この場合、取得する値は「72」になる。
marginは含まず、padding、borderを含めた高さが取れる。

margin、padding、borderを含めた高さを取得する。

JavaScript

$('#box').outerHeight(true);

この場合、取得する値は「78」になる。
margin、padding、borderを含めた高さが取れる。

要素にbox-sizing: border-box;が指定してあった場合

css

#box{
    height: 50px;
    width: 50px;
    padding: 10px;
    margin: 3px;
    border: 1px solid #888;
    box-sizing: border-box;
}

JavaScript

$('#box').height();//値：28
$('#box').outerHeight();//値：50
$('#box').outerHeight(true);//値：56

この要素の場合、box-sizing: border-box;でpaddingとborderを高さに含めているので、それらを差し引いた値がheight()で取れる値になる。
この基準に沿ってほかの2つも値が取れるようになる。