jQuery如何获取Element的边距和填充？

只是想知道-如何使用jQuery-我可以将元素格式化为总填充和边距等？即30px 30px 30px 30px或30px 5px 15px 30px等

我试过了

var margT = jQuery('img').css('margin');
var bordT = jQuery('img').css('border');
var paddT = jQuery('img').css('padding');

但这行不通吗？http://jsfiddle.net/q7Mra/

根据jQuery文档，不支持简写CSS属性。

根据“总填充”的含义，您可以执行以下操作：

var $img = $('img');
var paddT = $img.css('padding-top') + ' ' + $img.css('padding-right') + ' ' + $img.css('padding-bottom') + ' ' + $img.css('padding-left');

var bordT = $('img').outerWidth() - $('img').innerWidth();
var paddT = $('img').innerWidth() - $('img').width();
var margT = $('img').outerWidth(true) - $('img').outerWidth();

var formattedBord = bordT + 'px';
var formattedPadd = paddT + 'px';
var formattedMarg = margT + 'px';

查看jQuery API文档，以获取有关每个方面的信息：

• 外部宽度
• innerWidth
• 宽度

这是显示结果的经过编辑的jsFiddle。

您可以对“高度”执行相同类型的操作，以获取其边距，边框和边距。

jQuery.css()返回尺寸（以像素为单位），即使CSS本身以em，百分比或其他形式指定尺寸。它附加了单位（'px'），但您仍然parseInt()可以将其转换为整数（或parseFloat()，对于小数像素有意义的）。

http://jsfiddle.net/BXnXJ/

    $(document).ready(function () {
    var $h1 = $('h1');
    console.log($h1);
    $h1.after($('<div>Padding-top: ' + parseInt($h1.css('padding-top')) + '</div>'));
    $h1.after($('<div>Margin-top: ' + parseInt($h1.css('margin-top')) + '</div>'));
});

这对我有用：

var tP = $("img").css("padding").split(" ");
var Padding = {
    Top: tP[0] != null ? parseInt(tP[0]) : 0,
    Right: tP[1] != null ? parseInt(tP[1]) : (tP[0] != null ? parseInt(tP[0]) : 0),
    Bottom: tP[2] != null ? parseInt(tP[2]) : (tP[0] != null ? parseInt(tP[0]) : 0),
    Left: tP[3] != null ? parseInt(tP[3]) : (tP[1] != null ? parseInt(tP[1]) : (tP[0] != null ? parseInt(tP[0]) : 0))
};

结果示例：

Object {Top: 5, Right: 8, Bottom: 5, Left: 8}

总计：

var TotalPadding = Padding.Top + Padding.Right + Padding.Bottom + Padding.Left;

边境

我相信你可以使用 .css('border-left-width')。您还可以获取顶部，右侧和底部并进行比较以找到最大值。这里的关键是您必须指定特定的一面。

填充

请参阅jQuery以px为整数来计算padding-top

保证金

使用与边框或填充相同的逻辑。

或者，您可以使用externalWidth。伪代码应为
margin = (outerWidth(true) - outerWidth(false)) / 2。请注意，这仅适用于水平查找边距。要垂直查找边距，您需要使用externalHeight。

我有一个片段显示了如何使用jQuery获取元素的间距：

/* messing vertical spaces of block level elements with jQuery in pixels */

console.clear();

var jObj = $('selector');

for(var i = 0, l = jObj.length; i < l; i++) {
  //jObj.eq(i).css('display', 'block');
  console.log('jQuery object:', jObj.eq(i));
  console.log('plain element:', jObj[i]);

  console.log('without spacings                - jObj.eq(i).height():         ', jObj.eq(i).height());
  console.log('with padding                    - jObj[i].clientHeight:        ', jObj[i].clientHeight);
  console.log('with padding and border         - jObj.eq(i).outerHeight():    ', jObj.eq(i).outerHeight());
  console.log('with padding, border and margin - jObj.eq(i).outerHeight(true):', jObj.eq(i).outerHeight(true));
  console.log('total vertical spacing:                                        ', jObj.eq(i).outerHeight(true) - jObj.eq(i).height());
}

如果您要分析的元素没有任何边距，边框或任何定义的元素，您将无法将其返回。在顶部，您将能够获得“ auto”，这通常是默认设置。

从您的示例中，我可以看到您拥有margTas变量。不确定是否要尝试获得最高利润。如果是这样，您应该使用.css('margin-top')。

您还尝试从'img'中获取样式化，这将导致（如果您有多个）数组中的样式。

您应该做的是使用.each()jquery方法。

例如：

jQuery('img').each(function() {
    // get margin top
    var margT = jQuery(this).css('margin-top');

    // Do something with margT
});

$('img').margin() or $('img').padding()

返回：

{bottom: 10 ,left: 4 ,top: 0 ,right: 5}

获得价值：

$('img').margin().top

编辑：

使用jquery插件：jquery.sizes.js