2012-07-26 15 views
5

Tôi đang sử dụng phương thức height()/width() nhưng giá trị trả về của nó không có giá trị đệm và lề. Tôi không có vấn đề để tính toán tổng số với giá trị/chiều cao.Làm thế nào để tính toán chiều rộng và chiều cao của phần tử với giá trị padding/margin của chúng bằng cách sử dụng ít mã hơn?

Cách này hoạt động nhưng vấn đề của tôi là; quá lâu để tính toán tất cả chúng. Có cách nào để tính toán chúng với mã ít hơn mà không có lỗi?

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; 
    }​ 

Trả lời

11

Sử dụng outerWidth();outerHeight();

var ele = $('div'); 

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

http://jsfiddle.net/B7fMW/7/ thi s là tính toán không có lề, nhưng mã số của nó vẫn thấp hơn của tôi (: –

+0

Theo @WouterH chúng ta cần phải chuyển đúng như đã đề cập trong tài liệu. Vượt qua sự thật nó sẽ bao gồm cả lợi nhuận của bạn. – Vins

+0

+1 cho câu trả lời của bạn .. đẹp –