如何使用较少的代码用其填充/边距值计算元素的宽度和高度？ [英] How to calculate element's width and height with their padding / margin values using less code?

问题描述

我正在使用 height（） / width（）方法，但它的返回值没有它的填充和边距值。我没有问题，计算总与/高度值。

这种方式是工作，但我的问题是;它太长，无法计算所有的。有没有办法计算这些更少的代码没有bug？

这里是jsFiddle示例

jQuery：

  var ele = $（'div'）; 
 
 var eleW = ele.width（）; 
 var eleH = ele.height（）; 
 
 alert（eleW）; // returns 200 
 alert（eleH）; // returns 100 
 
 var eleMR = parseInt（ele.css（'margin-对'））; 
 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）; // returned 147 
 alert（eleTotalHeight）; // returns 122 
  

css：

  div {
 float：left; width：100px; height：200px; background-color：＃000; 
 margin：5px 3px 2px 4px; padding：10px 20px 5px; 
} 
  

解决方案

http://api.jquery.com/outerWidth/> outerWidth（）; 和 outerHeight（）;

  var ele = $（'div'）; 
 
 var eleW = ele.outerWidth（true）; 
 var eleH = ele.outerHeight（true）; 
  

I am using height() / width() method but its returning value without it's padding and margin values. I am not having problem to calculate total with / height values.

This way is working but my problem is; its too long to calculate all of them. Is there a way to calculate these with less code without bugs ?

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

解决方案

Use outerWidth(); and outerHeight();

var ele = $('div');

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

这篇关于如何使用较少的代码用其填充/边距值计算元素的宽度和高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！