jQuery Comment obtenir la marge et le remplissage de l'élément?

Je me demande juste - comment utiliser jQuery - je peux obtenir un remplissage total des éléments et une marge, etc.? c'est-à-dire 30px 30px 30px 30px ou 30px 5px 15px 30px etc.

j'ai essayé

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

Mais ça ne marche pas? http://jsfiddle.net/q7Mra/

Selon la documentation jQuery , les propriétés CSS abrégées ne sont pas prises en charge.

En fonction de ce que vous entendez par «remplissage total», vous pourrez peut-être faire quelque chose comme ceci:

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

Consultez la documentation de l'API jQuery pour plus d'informations sur chacun:

• largeur extérieure
• innerWidth
• largeur

Voici le jsFiddle édité montrant le résultat.

Vous pouvez effectuer le même type d'opérations sur la hauteur pour obtenir sa marge, sa bordure et son remplissage.

jQuery.css()renvoie les tailles en pixels, même si le CSS lui-même les spécifie en em, ou en pourcentage, ou autre. Il ajoute les unités ('px'), mais vous pouvez néanmoins les utiliser parseInt()pour les convertir en entiers (ou parseFloat(), pour les cas où les fractions de pixels ont un sens).

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

Cela fonctionne pour moi:

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

Exemple de résultat:

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

Pour faire un total:

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

Frontière

Je pense que vous pouvez obtenir la largeur de la bordure en utilisant .css('border-left-width'). Vous pouvez également récupérer le haut, la droite et le bas et les comparer pour trouver la valeur maximale. La clé ici est que vous devez spécifier un côté spécifique.

Rembourrage

Voir jQuery calculer padding-top comme un entier en px

Marge

Utilisez la même logique que la bordure ou le remplissage.

Vous pouvez également utiliser externalWidth . Le pseudo-code devrait être
margin = (outerWidth(true) - outerWidth(false)) / 2. Notez que cela ne fonctionne que pour trouver la marge horizontalement. Pour trouver la marge verticalement, vous devez utiliser externalHeight .

J'ai un extrait de code qui montre comment obtenir les espacements des éléments avec 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 l'élément que vous analysez n'a pas de marge, de bordure ou quoi que ce soit défini, vous ne pourrez pas le retourner. Au sommet, vous pourrez obtenir «auto» qui est normalement la valeur par défaut.

De votre exemple, je peux voir que vous avez margTcomme variable. Je ne sais pas si vous essayez d'obtenir une marge supérieure. Si tel est le cas, vous devriez utiliser .css('margin-top').

Vous essayez également d'obtenir la stylisation à partir de 'img' qui se traduira (si vous en avez plusieurs) dans un tableau.

Ce que vous devez faire est d'utiliser la .each()méthode jquery.

Par exemple:

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

    // Do something with margT
});

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

revenir:

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

obtenir de la valeur:

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

Éditer:

utiliser le plugin jquery: jquery.sizes.js