jQuery Element Margin ve Padding Nasıl Elde Edilir?

Sadece merak ediyorum - jQuery nasıl kullanılır - biçimlendirilmiş toplam dolgu ve kenar boşluğu vb. Öğeler elde edebilir miyim? yani 30px 30px 30px 30px veya 30px 5px 15px 30px vb.

denedim

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

Ama bu işe yaramıyor mu? http://jsfiddle.net/q7Mra/

Göre jQuery belgelerine , steno CSS özelliklerini desteklenmez.

"Toplam doldurma" ile ne demek istediğinize bağlı olarak, aşağıdaki gibi bir şey yapabilirsiniz:

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

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

Her biri hakkında bilgi için jQuery API belgelerine bakın:

• OuterWidth
• innerWidth
• Genişlik

İşte sonucu gösteren düzenlenmiş jsFiddle .

Yüksekliğin kenar boşluğunu, kenarlığını ve dolgusunu alması için aynı tür işlemleri gerçekleştirebilirsiniz.

jQuery.css()CSS'nin kendisi bunları em içinde veya yüzde olarak belirtmiş olsa bile boyutları piksel cinsinden döndürür. Birimleri ('px') ekler, ancak yine de parseInt()bunları tamsayılara dönüştürmek için kullanabilirsiniz (veya parseFloat()piksel kesirlerinin anlamlı olduğu yerlerde).

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

Bu benim için çalışıyor:

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

Sonuç örneği:

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

Toplam yapmak için:

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

Kenarlık

Kullanarak sınır genişliğini elde edebileceğinize inanıyorum .css('border-left-width'). Ayrıca, üst, sağ ve alt kısımları getirebilir ve maksimum değeri bulmak için bunları karşılaştırabilirsiniz. Buradaki anahtar, belirli bir tarafı belirtmeniz gerektiğidir.

Dolgu malzemesi

JQuery'nin padding-top'u px cinsinden tam sayı olarak hesaplamasına bakın

Marj

Kenarlık veya dolgu ile aynı mantığı kullanın.

Alternatif olarak, externalWidth'i kullanabilirsiniz . Sözde kod olmalıdır
margin = (outerWidth(true) - outerWidth(false)) / 2. Bunun yalnızca yatay olarak kenar boşluğunu bulmak için işe yaradığını unutmayın. Kenar boşluğunu dikey olarak bulmak için, externalHeight kullanmanız gerekir .

JQuery ile öğelerin aralıklarını nasıl elde edeceğinizi gösteren bir pasajım var:

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

Analiz ettiğiniz öğenin herhangi bir marjı, sınırı veya tanımlanmış herhangi bir özelliği yoksa, onu geri döndüremezsiniz. En üstte, normalde varsayılan olan 'otomatik'i alabileceksiniz.

Örneğinizden margTdeğişken olarak sahip olduğunuzu görebiliyorum . Üst marjı almaya çalışıp çalışmadığınızdan emin değilim. Eğer durum buysa, kullanmanız gerekir .css('margin-top').

Ayrıca bir dizide (birden fazla varsa) sonuçlanacak olan 'img'den stilizasyonu almaya çalışıyorsunuz.

Yapmanız gereken .each()jquery yöntemini kullanmaktır .

Örneğin:

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

    // Do something with margT
});

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

dönüş:

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

Değer elde etmek:

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

Düzenle:

jquery eklentisini kullanın: jquery.sizes.js