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

小开

Border

我相信你可以得到的边界宽度使用 .css('border-left-width')。您还可以获取 top、 right 和 bottom 并比较它们以找到 max 值。这里的关键是您必须指定一个特定的方。

填充物

保证金

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

或者，您可以使用 outerWidth。伪代码应该是 < br > margin = (outerWidth(true) - outerWidth(false)) / 2。注意，这只适用于水平查找边距。要垂直查找边距，需要使用 翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳。

小开

最佳答案

According to the JQuery 文档, shorthand CSS properties are not supported.

根据你所说的“全填充”的含义，你可以这样做:

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 文档，获取关于以下内容的信息:

下面是经过编辑的 JsFiddle显示的结果。

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

小开

如果您正在分析的元素没有任何空白、边框或任何已定义的内容，那么您将无法返回它。最多你可以得到‘ auto’，这通常是默认设置。

从你的例子中我可以看到你有 margT作为变量。不知道是不是想赚大钱。如果是这种情况，那么您应该使用 .css('margin-top')。

您还尝试从‘ img’获取样式化，这将导致(如果您有多个)数组。

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

For example:

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


// Do something with margT
});

小开

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

小开

编辑:

使用 jquery 插件: Jquery.sizes.js

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

报税表:

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

获得价值:

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

小开

这对我有用:

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;

小开

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