web-dev-qa-db-fra.com

jQuery Comment obtenir la marge et le rembourrage d'un élément?

Je me demandais simplement comment utiliser jQuery si je pouvais obtenir un remplissage total d'éléments formatés, une marge, etc. i.e. 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/

jquerypaddingmargin
96
Tom

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

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

Recherchez dans la documentation de l'API jQuery des informations sur chacun:

Voici l'édition jsFiddle montrant le résultat.

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

187
Dan Short

jQuery.css() renvoie les tailles en pixels, même si le CSS les spécifie lui-même en em, en pourcentage ou autre. Il ajoute les unités ('px'), mais vous pouvez néanmoins utiliser parseInt() pour les convertir en nombres entiers (ou parseFloat(), lorsque 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>'));
});
16
RavenHursT

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

J'ai un extrait qui montre comment obtenir les espacements d'é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());
}
2
Andreas

Frontière

Je pense que vous pouvez obtenir la largeur de la bordure avec .css('border-left-width'). Vous pouvez également aller chercher en haut, à droite et en 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 calcule padding-top sous la forme d'un entier en px

Margin

Utilisez la même logique que border ou padding.

Alternativement, vous pouvez utiliser outerWidth. 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 outerHeight.

2
simshaun

Si l'élément que vous analysez n'a aucune marge, 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.

D'après votre exemple, je peux voir que vous avez margT comme variable. Je ne sais pas si vous essayez d'obtenir le maximum. Si c'est le cas, vous devriez utiliser .css('margin-top').

Vous essayez également d'obtenir la stylisation de 'img', ce qui donnera (si vous en avez plus d'un) un tableau.

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

Par exemple:

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

    // Do something with margT
});
0
José P. Airosa