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

Question

Je me demandais comment, en utilisant jQuery, je pouvais obtenir le formatage d'un élément (padding total, marge, etc.), c'est-à-dire 30px 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 cela ne fonctionne pas ? http://jsfiddle.net/q7Mra/

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

Consultez les documents relatifs à l'API jQuery pour obtenir des informations sur chacun d'eux :

• largeur extérieure
• innerWidth
• largeur

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

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

Answer 2

Selon le Documentation sur jQuery Les propriétés CSS abrégées ne sont pas prises en charge.

Selon ce que vous entendez par "rembourrage total", vous pouvez 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');

Answer 3

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 utiliser parseInt() pour les convertir en nombres 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>'));
});

Answer 4

Frontière

Je crois 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 calcule le padding-top comme un nombre entier en px

Marge

Utilisez la même logique que pour border ou padding.

Alternativement, vous pouvez utiliser largeur extérieure . 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, il faut utiliser outerHeight .

Answer 5

Si l'élément que vous analysez n'a pas de marge, de bordure ou autre définie, vous ne pourrez pas le renvoyer. Au mieux, 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 margin-top. Si c'est le cas, vous devriez utiliser .css('margin-top') .

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

Ce que vous devez faire, c'est utiliser le .each() méthode jquery.

Par exemple :

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

    // Do something with margT
});