Come calcolare la larghezza e l'altezza dell'elemento con i valori di riempimento/margine usando meno codice?

Question

Sto usando il metodo height()/width() ma il suo valore di ritorno senza i valori padding e margin. Non ho problemi a calcolare il totale con/i valori di altezza.

In questo modo funziona, ma il mio problema è; è troppo lungo per calcolare tutti loro. C'è un modo per calcolarli con meno codice senza bug?

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

Usa outerWidth(); e outerHeight();

var ele = $('div'); 

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