jQueryでmarginとpaddingを含めた値の取得方法

全ての親要素の値を取得するなら「.height()」でいい。
でも、ちょくちょく「margin」や「padding」、「border」を含めた値が欲しくなる時があります。
いつも忘れてしまうので、これを期に覚えようじゃないかと思いまして書いてゆきます！

この条件で取得していきます！

【HTML】

<div class="object">「.object」</div>

【CSS】

.object {
  width: 200px;
  height: 100px;
  padding: 10px 10px 10px 10px;
  border: 2px solid #000;
  margin: 20px 20px 20px 20px;
}

幅と高さを取得

【jQuery】

// 横幅を取得
var width = $(".object").width();
// 高さを取得
var height = $(".object").height();

「padding」を含めた幅と高さを取得

【jQuery】

// 横幅を取得
var width = $(".object").innerWidth();
// 高さを取得
var height = $(".object").innerHeight();

「padding + border」を含めた幅と高さを取得

【jQuery】

// 「padding + border」を含めた横幅を取得
var width = $(".object").outerWidth();
// 「padding + border」を含めた高さを取得
var height = $(".object").outerHeight();

「padding + border + margin」を含めた幅と高さを取得

【jQuery】

// 「padding + border + margin」を含めた横幅を取得
var width = $(".object").outerWidth(true);
// 「padding + border + margin」を含めた高さを取得
var height = $(".object").outerHeight(true);

まとめ

今回は、わかりずらいpadding、margin、borderを含めたサイズの取得でした。
padding + borderの取得した数字がちょっとおかしいけど…。
なぜでしょうか。「box-sizing」かなと思いましたが違うみたいで。
もしわかる方いましたら教えていただけると嬉しいです。

この他に「border」は抜きで「margin + padding」を含めたサイズや、
「margin」だけ含めたサイズの取得は、需要がなさそうなので割愛させていただきました。