如何使用更少的代码计算元素的宽度和高度及其填充/边距值？答案

【问题标题】：How to calculate element's width and height with their padding / margin values using less code?如何使用更少的代码计算元素的宽度和高度及其填充/边距值？
【发布时间】：2012-07-24 19:47:39
【问题描述】：

我正在使用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;
     }

【问题讨论】：

标签： jquery css height width

【解决方案1】：

使用outerWidth(); 和outerHeight();

var ele = $('div');

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

【讨论】：

jsfiddle.net/B7fMW/7 这是没有边距的计算，但它的代码仍然比我的少（：
根据@WouterH，我们需要传递文档中提到的true。通过 true 它也将包括您的保证金。
@Vins：这使您的答案正确。我会删除我的答案，因为你是我还在玩小提琴的第一个 :)
请注意，这种方式也会返回边框值。
@Vins - 很棒的东西。非常感谢您发布。虽然是很久以前的事了，但对我来说还是很方便的。谢谢。