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


105

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/



Consulte el enlace a continuación, que es algo similar. stackoverflow.com/questions/590602/…
Praveen

Respuestas:


105

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

sí, parece que tienes que hacer cada uno individualmente :( lo que apesta
Tom

27
No lo saque así. ¿Y si uno es autoo 2%o inherit?
Lightness Races in Orbit

@Dan - realmente aprecio el esfuerzo Dan. disculpas por no aclarar más :( Lamento perder tu tiempo.
Tom

3
Tiene razón sobre los valores no numéricos. Creo que la respuesta de Dan Short es más sólida.
Elias Zamaria

4
actualización : A partir de jQuery 1.9, pasar una matriz de propiedades de estilo a .css () dará como resultado un objeto de pares propiedad-valor. Por ejemplo, para recuperar los cuatro valores de ancho de borde representados, puede usar$( elem ).css([ "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth" ]).
Hussein Nazzal

193
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:

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.


1
Si ese es el caso, puede tomar los valores calculados, agregar 'px' y tiene los valores de píxeles.
Dan Short

2
Necesita actualizar su pregunta para dejarlo claro en ese momento. De lo contrario, perderemos el tiempo escribiendo soluciones a problemas que no está tratando de resolver :). Explique en su pregunta exactamente los valores de retorno que desea. Solicitó el margen total y el relleno del elemento, no los valores de los márgenes individuales (que pueden ser diferentes para margin-lefty margin-right, y pueden ser emo px.
Dan Short

2
Lo es, pero esa fue mi edición de su pregunta, no su pregunta original :)
Dan Short

4
Esto es muy útil; ¿Qué hacer si los valores de margen / relleno izquierdo y derecho son diferentes y desea, por ejemplo, solo el margen izquierdo o el valor de relleno?
jpap

1
¿No está conectado el margen superior al heightno width?
JohnK

16

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

3

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;

2

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 .


Su estrategia de margen no funciona en Firefox, devolverá 0 cada vez si tiene un relleno horizontal "automático", por ejemplo, para centrar el elemento.
Ben Dilts

2

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

0

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

-1
$('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


1
No veo ninguna función margin () en jQuery.
Ortomala Lokni
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.