少ないコードを使用して、パディング/マージン値で要素の幅と高さを計算するにはどうすればよいですか？

Question

私はheight()/width()メソッドを使用していますが、その戻り値にはパディングとマージン値はありません。私は高さの合計値を計算するのに問題はない。

このように動作していますが、私の問題はあります。そのすべてを計算するには長すぎます。バグのない少ないコードでこれらを計算する方法はありますか？

Here is jsFiddle example.

のjQuery：

var ele = $('div'); 

var eleW = ele.width(); 
var eleH = ele.height(); 

alert(eleW);//returning 200 
alert(eleH);//returning 100 

var eleMR = parseInt(ele.css('margin-right')); 
var eleML = parseInt(ele.css('margin-left')); 
var eleMT = parseInt(ele.css('margin-top')); 
var eleMB = parseInt(ele.css('margin-bottom')); 

var elePR = parseInt(ele.css('padding-right')); 
var elePL = parseInt(ele.css('padding-left')); 
var elePT = parseInt(ele.css('padding-top')); 
var elePB = parseInt(ele.css('padding-bottom')); 

var eleTotalWidth = eleMR + eleML + elePR + elePL + eleW; 
var eleTotalHeight = eleMT + eleMB + elePT + elePB + eleW; 

alert(eleTotalWidth);//returning 147 
alert(eleTotalHeight);//returning 122 

CSS：

div { 
     float:left; width:100px; height:200px; background-color:#000; 
     margin:5px 3px 2px 4px; padding:10px 20px 5px; 
    }​ 

Answer 1

使用outerWidth();とouterHeight();

var ele = $('div'); 

var eleW = ele.outerWidth(true); 
var eleH = ele.outerHeight(true);