jQuery如何获取元素的外边距和内边距？

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/

- Tom

---

https://dev59.com/yHRB5IYBdhLWcg3wiHz7 - Artem Pianykh

请参考下面的链接，它与此类似。https://dev59.com/yHRB5IYBdhLWcg3wiHz7 - Praveen

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

• outerWidth
• innerWidth
• width

这是已编辑的jsFiddle，显示了结果。

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

- Dan Short

---

如果是这种情况，您可以获取计算出的值，添加 'px' 单位，这样就得到了像素值。 - Dan Short

你需要更新你的问题，以使其更加清晰明了。否则我们会浪费时间为你解决你并不想解决的问题 :). 在你的问题中准确说明你想要的返回值。你要求元素的总边距和填充，而不是单个边距值（这些值可能对于margin-left和margin-right是不同的，并且可能是em或px）。 - Dan Short

这是我的编辑，而不是你的原始问题 :) - Dan Short

非常实用。如果左右边距/填充值不同，且您只想获取左边的边距或填充值，该怎么办？ - jpap

顶部边距不是与“宽度”相关联而是与“高度”相关联吗？ - JohnK

Answer 2

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

根据你对“总填充”（total padding）的理解，你可以尝试像这样做：

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

- Elias Zamaria

---

不要像这样把它拉出来。如果其中一个是“auto”、“2%”或“inherit”会怎样？ - Lightness Races in Orbit

@Dan - 非常感谢你的努力，抱歉没有更多地澄清 :( 很抱歉浪费了你的时间。 - Tom

你对非数字值的看法是正确的。我认为丹·肖特的回答更加健壮。 - Elias Zamaria

自jQuery 1.9版本起，将样式属性数组传递给.css()方法将导致生成一个包含属性-值对的对象。例如，要检索所有四个渲染的边框宽度值，可以使用$( elem ).css([ "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth" ])。 - Hussein Nazzal

@LightnessRacesinOrbit 虽然你在技术上是正确的，但想到有人使用基于百分比的填充让我想掌掴那个想出这个方法的人。 - Dbl

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

- RavenHursT

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;

- Brutus

Answer 5

边框

我认为您可以使用.css('border-left-width')来获取边框宽度。您还可以获取上、右、下边框并将它们进行比较以找到最大值。 关键在于您必须指定具体的边。

内边距

请参见jQuery计算填充顶部像素整数

外边距

使用与边框或内边距相同的逻辑。

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

- simshaun

---

你的边距策略在Firefox中不起作用，如果你有“auto”水平填充，例如居中元素，它将每次返回0。 - Ben Dilts

Answer 6

我有一个代码片段可以展示如何使用jQuery获取元素的间距：

```javascript ```

请注意，这里只是展示了如何获取间距，具体实现还需要根据具体情况进行调整。

/* 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());
}

- Andreas

Answer 7

如果你分析的元素没有定义任何边距、边框或其他东西，你将无法返回它。最多只能获取通常是默认值的“auto”。

从你的例子中可以看出，你有一个名为margT的变量。不确定是否试图获得margin-top。如果是这种情况，你应该使用.css('margin-top')。

你还试图从“img”中获取样式化信息，这将导致（如果你有多个）成为一个数组。

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

例如：

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

    // Do something with margT
});

- José P. Airosa

Answer 8

编辑：

使用 jQuery 插件：jquery.sizes.js

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

返回：

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

获取值：

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

- WantToDo

---

我在jQuery中没有看到任何margin()函数。 - Ortomala Lokni