jQuery Bagaimana Cara Mendapatkan Margin dan Padding Elemen?

Hanya bertanya-tanya - bagaimana menggunakan jQuery - saya bisa mendapatkan elemen yang diformat total padding dan margin dll? yaitu 30px 30px 30px 30px atau 30px 5px 15px 30px dll

Saya mencoba

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

Tapi ini tidak berhasil? http://jsfiddle.net/q7Mra/

Menurut dokumentasi jQuery , properti CSS singkatan tidak didukung.

Bergantung pada apa yang Anda maksud dengan "padding total", Anda mungkin dapat melakukan sesuatu seperti ini:

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

Periksa dokumen jQuery API untuk informasi masing-masing:

• outerWidth
• innerWidth
• lebar

Berikut jsFiddle yang diedit menunjukkan hasilnya.

Anda bisa melakukan jenis operasi yang sama untuk Height untuk mendapatkan margin, border, dan paddingnya.

jQuery.css()mengembalikan ukuran dalam piksel, meskipun CSS sendiri menentukannya dalam em, atau sebagai persentase, atau apa pun. Ini menambahkan unit ('px'), tetapi Anda tetap dapat menggunakannya parseInt()untuk mengonversinya menjadi bilangan bulat (atau parseFloat(), untuk fraksi piksel yang masuk akal).

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

Ini bekerja untuk saya:

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

Contoh hasil:

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

Untuk membuat total:

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

Berbatasan

Saya yakin Anda bisa mendapatkan lebar perbatasan menggunakan .css('border-left-width'). Anda juga dapat mengambil atas, kanan, dan bawah dan membandingkannya untuk menemukan nilai maksimal. Kuncinya di sini adalah Anda harus menentukan sisi tertentu.

Lapisan

Lihat jQuery menghitung padding-top sebagai integer dalam px

Batas

Gunakan logika yang sama seperti border atau padding.

Alternatifnya, Anda bisa menggunakan outerWidth . Pseudo-code seharusnya
margin = (outerWidth(true) - outerWidth(false)) / 2. Perhatikan bahwa ini hanya berfungsi untuk menemukan margin secara horizontal. Untuk mencari margin secara vertikal, Anda perlu menggunakan outerHeight .

Saya memiliki cuplikan yang menunjukkan, cara mendapatkan jarak elemen dengan 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());
}

Jika elemen yang Anda analisis tidak memiliki margin, batas, atau definisi apa pun, Anda tidak akan dapat mengembalikannya. Di puncak Anda akan bisa mendapatkan 'otomatis' yang biasanya merupakan default.

Dari contoh Anda, saya dapat melihat bahwa Anda memiliki margTvariabel. Tidak yakin apakah Anda mencoba mendapatkan margin-top. Jika itu kasus yang harus Anda gunakan .css('margin-top').

Anda juga mencoba mendapatkan penataan gaya dari 'img' yang akan dihasilkan (jika Anda memiliki lebih dari satu) dalam larik.

Yang harus Anda lakukan adalah menggunakan .each()metode jquery.

Sebagai contoh:

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

    // Do something with margT
});

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

kembali:

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

dapatkan nilai:

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

Edit:

gunakan plugin jquery: jquery.sizes.js