it-swarm.cn

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

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

94
Tom

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

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

var $img = $('img');
var paddT = $img.css('padding-top') + ' ' + $img.css('padding-right') + ' ' + $img.css('padding-bottom') + ' ' + $img.css('padding-left');
91
Elias Zamaria
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 显示结果。

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

185
Dan Short

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

这对我有用:

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;
3
Brutus

边界

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

填充

参见 jQuery计算padding-top为px中的整数

Margin

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

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

2
simshaun

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

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

从你的例子我可以看出你有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
});
0
José P. Airosa