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


105

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/



Veuillez vous référer au lien ci-dessous qui est similaire. stackoverflow.com/questions/590602/…
Praveen le

Réponses:


105

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

ouais semble que vous devez faire chacun individuellement: (ce qui craint
Tom

27
Ne le sortez pas comme ça. Et si on est autoou 2%ou inherit?
Courses de légèreté en orbite le

@Dan - apprécions vraiment l'effort Dan. excuses pour ne pas clarifier plus: (Désolé de perdre votre temps.
Tom

3
Vous avez raison sur les valeurs non numériques. Je pense que la réponse de Dan Short est plus robuste.
Elias Zamaria le

4
mise à jour : à partir de jQuery 1.9, passer un tableau de propriétés de style à .css () donnera un objet de paires propriété-valeur. Par exemple, pour récupérer les quatre valeurs de largeur de bordure rendues, vous pouvez utiliser$( 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';

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

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.


1
Si tel est le cas, vous pouvez prendre les valeurs calculées, ajouter «px» et vous avez les valeurs de pixel.
Dan Short le

2
Vous devez mettre à jour votre question pour que cela soit clair. Sinon, nous perdons du temps à écrire des solutions aux problèmes que vous n'essayez pas de résoudre :). Expliquez dans votre question exactement les valeurs de retour que vous souhaitez. Vous avez demandé la marge totale et le remplissage de l'élément, pas les valeurs de marge individuelles (qui peuvent être différentes pour margin-leftet margin-right, et peuvent être emou px.
Dan Short


4
Ceci est très utile; que faire si les valeurs de marge / marge gauche et droite sont différentes et que vous voulez, par exemple, juste la marge gauche ou la valeur de remplissage?
jpap

1
La marge supérieure n'est-elle pas reliée au heightpas au width?
JohnK

16

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

3

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;

2

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 .


Votre stratégie de marge ne fonctionne pas dans Firefox, elle retournera 0 à chaque fois si vous avez un remplissage horizontal "automatique", par exemple pour centrer l'élément.
Ben Dilts

2

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

0

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

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


1
Je ne vois aucune fonction margin () dans jQuery.
Ortomala Lokni
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.