如何使用較少代碼計算元素的寬度和高度以及填充/邊距值？

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);