Question

只是想知道 - 如何使用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/

Answer 1

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文档以获取有关每个文档的信息：

以下是显示结果的已修改jsFiddle。

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

Answer 2

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

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

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

Answer 3

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>'));
});

Answer 4

这对我有用：

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;

Answer 5

边界

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

填充

请参阅jQuery calculate padding-top as integer in px

保证金

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

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

Answer 6

我有一个片段，显示如何使用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());
}

Answer 7

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

从您的示例中我可以看到您有margT作为变量。不确定是否试图获得保证金最高价。如果是这种情况，您应该使用.css('margin-top')。

你也试图从'img'中获得样式化，这将导致数组中的结果（如果你有多个）。

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

例如：

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

    // Do something with margT
});

Answer 8

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

返回：

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

获得价值：

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

修改

使用jquery插件：jquery.sizes.js

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

8 个答案:

边界

填充

保证金