jQuery ¿Cómo obtener el margen y el relleno del elemento?

Solo me pregunto, ¿cómo puedo usar jQuery para obtener un relleno y margen total formateado de elementos, etc.? es decir, 30px 30px 30px 30px o 30px 5px 15px 30px, etc.

Lo intenté

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

¿Pero esto no funciona? http://jsfiddle.net/q7Mra/

Según la documentación de jQuery , las propiedades CSS abreviadas no son compatibles.

Dependiendo de lo que quiera decir con "relleno total", es posible que pueda hacer algo como esto:

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

Consulte los documentos de la API de jQuery para obtener información sobre cada uno:

• externalWidth
• innerWidth
• anchura

Aquí está el jsFiddle editado que muestra el resultado.

Puede realizar el mismo tipo de operaciones para la altura para obtener su margen, borde y relleno.

jQuery.css()devuelve tamaños en píxeles, incluso si el propio CSS los especifica en em, o como un porcentaje, o lo que sea. Agrega las unidades ('px'), pero de todos modos puede usarlas parseInt()para convertirlas en números enteros (o parseFloat(), donde las fracciones de píxeles tienen sentido).

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

Esto funciona para mi:

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

Ejemplo de resultado:

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

Para hacer un total:

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

Frontera

Creo que puedes obtener el ancho del borde usando .css('border-left-width') . También puede buscar la parte superior, derecha e inferior y compararlas para encontrar el valor máximo. La clave aquí es que debes especificar un lado específico.

Relleno

Ver jQuery calcular padding-top como entero en px

Margen

Utilice la misma lógica que el borde o el relleno.

Alternativamente, puede usar outerWidth . El pseudocódigo debería ser
margin = (outerWidth(true) - outerWidth(false)) / 2. Tenga en cuenta que esto solo funciona para encontrar el margen horizontalmente. Para encontrar el margen verticalmente, necesitaría usar externalHeight .

Tengo un fragmento que muestra cómo obtener los espacios de los elementos con 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());
}

Si el elemento que está analizando no tiene ningún margen, borde o lo que sea definido, no podrá devolverlo. En la parte superior, podrá obtener 'automático', que normalmente es el predeterminado.

De su ejemplo puedo ver que tiene margTcomo variable. No estoy seguro de si está tratando de obtener el margen superior. Si ese es el caso, debería usar .css('margin-top').

También está tratando de obtener la estilización de 'img' que resultará (si tiene más de uno) en una matriz.

Lo que debes hacer es usar el .each()método jquery.

Por ejemplo:

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

    // Do something with margT
});

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

regreso:

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

obtener valor:

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

Editar:

use el complemento jquery: jquery.sizes.js