jQuery Bagaimana Cara Mendapatkan Margin dan Padding Elemen?


105

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/



Silakan merujuk ke tautan di bawah ini yang mirip. stackoverflow.com/questions/590602/…
Praveen

Jawaban:


105

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

ya sepertinya Anda harus melakukan masing-masing secara individual :( yang menyebalkan
Tom

27
Jangan menariknya seperti ini. Bagaimana jika salah satu adalah autoatau 2%atau inherit?
Balapan Ringan di Orbit

@Dan - sangat menghargai usaha Dan. maaf karena tidak mengklarifikasi lebih lanjut :( Maaf membuang waktu Anda.
Tom

3
Anda benar tentang nilai non-numerik. Saya pikir jawaban Dan Short lebih kuat.
Elias Zamaria

4
update : Pada jQuery 1.9, meneruskan array properti gaya ke .css () akan menghasilkan objek pasangan properti-nilai. Misalnya, untuk mengambil keempat nilai lebar-batas yang diberikan, Anda dapat menggunakan$( 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';

Periksa dokumen jQuery API untuk informasi masing-masing:

Berikut jsFiddle yang diedit menunjukkan hasilnya.

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


1
Jika demikian, Anda dapat mengambil nilai yang dihitung, menambahkan 'px' dan Anda mendapatkan nilai pikselnya.
Dan Short

2
Anda perlu memperbarui pertanyaan Anda untuk memperjelasnya. Jika tidak, kami membuang-buang waktu menulis solusi untuk masalah yang tidak ingin Anda selesaikan :). Jelaskan dalam pertanyaan Anda dengan tepat nilai kembali yang Anda inginkan. Anda meminta margin total dan padding elemen, bukan nilai margin individual (yang mungkin berbeda untuk margin-leftdan margin-right, dan mungkin ematau px.
Dan Short

2
Ya, tapi itu hasil edit saya untuk pertanyaan Anda, bukan pertanyaan asli Anda :)
Dan Short

4
Ini sangat berguna; apa yang harus dilakukan jika nilai margin / padding kiri dan kanan berbeda dan Anda ingin, misalnya, hanya margin kiri atau nilai padding?
jpap

1
Bukankah margin atas terhubung dengan heightbukan width?
JohnK

16

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

3

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;

2

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 .


Strategi margin Anda tidak berfungsi di Firefox, ia akan mengembalikan 0 setiap kali jika Anda memiliki padding horizontal "otomatis", misalnya untuk menengahkan elemen.
Ben Dilts

2

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

0

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

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


1
Saya tidak melihat fungsi margin () di jQuery.
Ortomala Lokni
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.