jQuery Come ottenere il margine e il riempimento dell'elemento?


105

Mi chiedo solo - come usare jQuery - posso ottenere un riempimento totale e un margine formattati per gli elementi, ecc.? cioè 30px 30px 30px 30px o 30px 5px 15px 30px ecc

Provai

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

Ma questo non funziona? http://jsfiddle.net/q7Mra/



Fare riferimento al collegamento sottostante che è qualcosa di simile. stackoverflow.com/questions/590602/…
Praveen

Risposte:


105

Secondo la documentazione di jQuery , le proprietà CSS abbreviate non sono supportate.

A seconda di cosa intendi per "riempimento totale", potresti essere in grado di fare qualcosa del genere:

var $img = $('img');
var paddT = $img.css('padding-top') + ' ' + $img.css('padding-right') + ' ' + $img.css('padding-bottom') + ' ' + $img.css('padding-left');

sì, sembra che tu debba fare ciascuno individualmente :( che fa schifo
Tom

27
Non tirarlo fuori in questo modo. E se uno è autoo 2%o inherit?
Gare di leggerezza in orbita

@ Dan - apprezzo molto lo sforzo Dan. scusa per non aver chiarito di più :( Scusa se sprechi il tuo tempo.
Tom

3
Hai ragione sui valori non numerici. Penso che la risposta di Dan Short sia più robusta.
Elias Zamaria

4
aggiornamento : a partire da jQuery 1.9, il passaggio di un array di proprietà di stile a .css () risulterà in un oggetto di coppie proprietà-valore. Ad esempio, per recuperare tutti e quattro i valori di larghezza del bordo renderizzati, è possibile utilizzare$( 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';

Controlla i documenti dell'API jQuery per informazioni su ciascuno:

Ecco il jsFiddle modificato che mostra il risultato.

È possibile eseguire lo stesso tipo di operazioni per l'altezza per ottenere il margine, il bordo e il riempimento.


1
In tal caso, puoi prendere i valori calcolati, aggiungere "px" e hai i valori dei pixel.
Dan Short,

2
Allora devi aggiornare la tua domanda per renderlo più chiaro. Altrimenti perdiamo tempo a scrivere soluzioni a problemi che non stai cercando di risolvere :). Spiega nella tua domanda esattamente i valori di ritorno che desideri. Hai chiesto il margine totale e la spaziatura interna dell'elemento, non i singoli valori di margine (che possono essere diversi per margin-lefte margin-right, e possono essere emo px.
Dan Short,

2
Lo è, ma quella era la mia modifica alla tua domanda, non la tua domanda originale :)
Dan Short

4
Questo è molto utile; cosa fare se i valori di margine sinistro e destro / riempimento sono diversi e si desidera, ad esempio, solo il margine sinistro o il valore di riempimento?
jpap

1
Il margine superiore non è collegato al heightnon al width?
JohnK

16

jQuery.css()restituisce le dimensioni in pixel, anche se il CSS stesso le specifica in em, o come percentuale, o qualsiasi altra cosa. Aggiunge le unità ('px'), ma puoi comunque usarle parseInt()per convertirle in numeri interi (o parseFloat(), per dove le frazioni di pixel hanno senso).

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

Questo funziona per me:

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

Esempio di risultato:

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

Per fare un totale:

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

2

Confine

Credo che tu possa ottenere la larghezza del bordo usando .css('border-left-width'). Puoi anche recuperare in alto, a destra e in basso e confrontarli per trovare il valore massimo. La chiave qui è che devi specificare un lato specifico.

Imbottitura

Vedere jQuery calcolare padding-top come numero intero in px

Margine

Usa la stessa logica del bordo o del riempimento.

In alternativa, puoi usare outerWidth . Lo pseudo codice dovrebbe essere
margin = (outerWidth(true) - outerWidth(false)) / 2. Nota che questo funziona solo per trovare il margine in orizzontale. Per trovare il margine verticalmente, dovresti usare outerHeight .


La tua strategia per il margine non funziona in Firefox, restituirà 0 ogni volta se hai un riempimento orizzontale "automatico", ad esempio per centrare l'elemento.
Ben Dilts

2

Ho uno snippet che mostra come ottenere le spaziature degli elementi 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

Se l'elemento che stai analizzando non ha alcun margine, bordo o altro definito non potrai restituirlo. In cima sarai in grado di ottenere "auto" che normalmente è l'impostazione predefinita.

Dal tuo esempio posso vedere che hai margTcome variabile. Non sono sicuro se stai cercando di ottenere il margine superiore. Se è questo il caso dovresti usare .css('margin-top').

Stai anche cercando di ottenere la stilizzazione da "img" che risulterà (se ne hai più di uno) in un array.

Quello che dovresti fare è usare il .each()metodo jquery.

Per esempio:

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

    // Do something with margT
});

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

ritorno:

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

ottieni valore:

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

Modificare:

usa il plugin jquery: jquery.sizes.js


1
Non vedo alcuna funzione margin () in jQuery.
Ortomala Lokni
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.