Öğenin genişliğini ve yüksekliğini, daha az kod kullanarak dolgu/kenar boşluğu değerleri ile nasıl hesaplanır?

Question

height()/width() yöntemini kullanıyorum ancak geri dönüş değeri, dolgu ve kenar boşluğu değerleri olmadan kullanıyorum. Toplam/yükseklik değerlerini hesaplamakta sorun yaşıyorum.

Bu şekilde çalışıyor ama benim sorunum; hepsini hesaplamak için çok uzun. Bunları hata olmadan daha az kodla hesaplamanın bir yolu var mı?

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

Kullanım outerWidth(); ve outerHeight();

var ele = $('div'); 

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