jQuery Jak uzyskać margines i wypełnienie elementu?

105

Zastanawiam się tylko - jak używając jQuery - mogę uzyskać sformatowane elementy, całkowite wypełnienie i marginesy itp. tj. 30px 30px 30px 30px lub 30px 5px 15px 30px itp

próbowałem

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

Ale to nie działa? http://jsfiddle.net/q7Mra/

Tomek
źródło
Proszę zapoznać się z poniższym linkiem, który jest podobny. stackoverflow.com/questions/590602/…
Praveen,

Odpowiedzi:

105

Zgodnie z dokumentacją jQuery , skrócone właściwości CSS nie są obsługiwane.

W zależności od tego, co rozumiesz przez „całkowite wypełnienie”, możesz zrobić coś takiego:

var $img = $('img');
var paddT = $img.css('padding-top') + ' ' + $img.css('padding-right') + ' ' + $img.css('padding-bottom') + ' ' + $img.css('padding-left');
Elias Zamaria
źródło
tak, wydaje się, że musisz robić każdy indywidualnie :( co jest do bani
Tom,
27
Nie wyciągaj tego w ten sposób. A co jeśli jest autoalbo 2%albo inherit?
Wyścigi lekkości na orbicie,
@Dan - naprawdę doceniam trud Dan. przepraszam za nie wyjaśnianie więcej :( Przepraszam, że tracę czas.
Tom,
3
Masz rację co do wartości nienumerycznych. Myślę, że odpowiedź Dana Shorta jest solidniejsza.
Elias Zamaria,
4
aktualizacja : Począwszy od jQuery 1.9, przekazanie tablicy właściwości stylu do .css () da w wyniku obiekt par właściwość-wartość. Na przykład, aby pobrać wszystkie cztery wyrenderowane wartości szerokości obramowania, możesz użyć$( 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';

Sprawdź dokumentację jQuery API, aby uzyskać informacje na temat każdego z nich:

Oto edytowany plik jsFiddle pokazujący wynik.

Możesz wykonać te same operacje dla wysokości, aby uzyskać jej margines, obramowanie i wypełnienie.

Dan Short
źródło
1
W takim przypadku możesz wziąć obliczone wartości, dodać „px” i masz wartości pikseli.
Dan Short,
2
Musisz wtedy zaktualizować swoje pytanie, aby było to jasne. W przeciwnym razie tracimy czas na pisanie rozwiązań problemów, których nie próbujesz rozwiązać :). Wyjaśnij w swoim pytaniu dokładnie, jakie wartości zwracane chcesz. Poprosiłeś o całkowity margines i wypełnienie elementu, a nie o poszczególne wartości marginesów (które mogą być różne dla margin-lefti margin-righti mogą być emlub px.
Dan Short,
2
To prawda, ale to była moja zmiana w Twoim pytaniu, a nie Twoje oryginalne pytanie :)
Dan Short,
4
Jest to bardzo przydatne; co zrobić, jeśli lewy i prawy margines / wartości dopełnienia są różne i chcesz, na przykład, tylko lewy margines lub wartość dopełnienia?
jpap
1
Czy górny margines nie jest połączony z heightnie width?
JohnK
16

jQuery.css()zwraca rozmiary w pikselach, nawet jeśli sam CSS określa je w em, jako procent lub cokolwiek. Dołącza jednostki („px”), ale mimo to możesz użyć ich parseInt()do konwersji na liczby całkowite (lub parseFloat(), jeśli ułamki pikseli mają 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>'));
});
RavenHursT
źródło
3

To działa dla mnie:

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

Przykład wyniku:

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

Aby uzyskać sumę:

var TotalPadding = Padding.Top + Padding.Right + Padding.Bottom + Padding.Left;
Brutus
źródło
2

Granica

Wierzę, że możesz uzyskać szerokość obramowania za pomocą .css('border-left-width'). Możesz także pobrać górną, prawą i dolną część i porównać je, aby znaleźć wartość maksymalną. Kluczowe jest tutaj to, że musisz określić konkretną stronę.

Wyściółka

Zobacz jQuery obliczyć padding-top jako liczbę całkowitą w px

Margines

Użyj tej samej logiki co obramowanie lub dopełnienie.

Alternatywnie możesz użyć externalWidth . Powinien to być pseudokod
margin = (outerWidth(true) - outerWidth(false)) / 2. Zwróć uwagę, że działa to tylko w przypadku wyszukiwania marginesu w poziomie. Aby znaleźć margines w pionie, musisz użyć externalHeight .

simshaun
źródło
Twoja strategia dotycząca marginesów nie działa w przeglądarce Firefox, zwróci 0 za każdym razem, jeśli masz „automatyczne” dopełnienie poziome, na przykład w celu wyśrodkowania elementu.
Ben Dilts
2

Mam fragment, który pokazuje, jak uzyskać odstępy między elementami za pomocą 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());
}
Andreas
źródło
0

Jeśli analizowany element nie ma marginesu, obramowania lub czegokolwiek zdefiniowanego, nie będziesz w stanie go zwrócić. Na górze będziesz mógł uzyskać `` auto '', które zwykle jest domyślne.

Z twojego przykładu widzę, że masz margTzmienną. Nie jestem pewien, czy próbujesz uzyskać szczyt marginesu. W takim przypadku powinieneś użyć .css('margin-top').

Próbujesz również uzyskać stylizację z 'img', co spowoduje (jeśli masz więcej niż jedną) w tablicy.

Powinieneś użyć .each()metody jquery.

Na przykład:

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

    // Do something with margT
});
José P. Airosa
źródło
-1
$('img').margin() or $('img').padding()

powrót:

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

uzyskać wartość:

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

Edytować:

użyj wtyczki jquery: jquery.sizes.js

Chcę zrobić
źródło
1
Nie widzę żadnej funkcji margin () w jQuery.
Ortomala Lokni