jQuery จะรับ Margin และ Padding ของ Element ได้อย่างไร

Question 1

แค่สงสัยว่า - ใช้ jQuery ได้อย่างไร - ฉันจะได้รับองค์ประกอบที่จัดรูปแบบช่องว่างภายในและระยะขอบ ฯลฯ ได้อย่างไร เช่น 30px 30px 30px 30px หรือ 30px 5px 15px 30px เป็นต้น

ฉันเหนื่อย

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

แต่ไม่ได้ผล? http://jsfiddle.net/q7Mra/

Question 2

ตามเอกสาร jQueryไม่รองรับคุณสมบัติ CSS ชวเลข

ขึ้นอยู่กับความหมายของ "การเว้นระยะห่างทั้งหมด" คุณอาจสามารถทำสิ่งนี้ได้:

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

Question 3

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

ตรวจสอบเอกสาร jQuery API สำหรับข้อมูลเกี่ยวกับแต่ละ:

นี่คือjsFiddle ที่แก้ไขแล้วซึ่งแสดงผลลัพธ์

คุณสามารถดำเนินการประเภทเดียวกันสำหรับความสูงเพื่อให้ได้ระยะขอบเส้นขอบและช่องว่างภายใน

Question 4

jQuery.css()ส่งคืนขนาดเป็นพิกเซลแม้ว่า CSS จะระบุเป็นหน่วยหรือเป็นเปอร์เซ็นต์หรืออะไรก็ตาม มันต่อท้ายหน่วย ('px') แต่คุณยังสามารถใช้parseInt()เพื่อแปลงเป็นจำนวนเต็ม (หรือparseFloat()ในกรณีที่เศษส่วนของพิกเซลมีความหมาย)

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

Question 5

สิ่งนี้ใช้ได้กับฉัน:

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

ตัวอย่างผลลัพธ์:

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

ในการสร้างผลรวม:

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

Question 6

ชายแดน

.css('border-left-width')ผมเชื่อว่าคุณจะได้รับความกว้างชายแดนใช้ คุณยังสามารถดึงข้อมูลด้านบนขวาและด้านล่างและเปรียบเทียบเพื่อหาค่าสูงสุด ที่สำคัญคือคุณต้องระบุด้านใดด้านหนึ่ง

การขยายความ

ดูjQuery คำนวณ padding-top เป็นจำนวนเต็มใน px

ระยะขอบ

ใช้ตรรกะเดียวกันกับเส้นขอบหรือช่องว่างภายใน

หรือคุณสามารถใช้outerWidth
margin = (outerWidth(true) - outerWidth(false)) / 2หลอกรหัสควรจะเป็น โปรดทราบว่าสิ่งนี้ใช้ได้กับการค้นหาระยะขอบในแนวนอนเท่านั้น เพื่อหาขอบแนวตั้งที่คุณจะต้องใช้outerHeight

Question 7

ฉันมีตัวอย่างที่แสดงวิธีรับระยะห่างขององค์ประกอบด้วย 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());
}

Question 8

หากองค์ประกอบที่คุณกำลังวิเคราะห์ไม่มีระยะขอบเส้นขอบหรือสิ่งที่กำหนดไว้คุณจะไม่สามารถส่งคืนได้ ที่ด้านบนสุดคุณจะได้รับ "อัตโนมัติ" ซึ่งโดยปกติจะเป็นค่าเริ่มต้น

จากตัวอย่างของคุณฉันเห็นว่าคุณมีmargTตัวแปร ไม่แน่ใจว่ากำลังพยายามรับกำไรสูงสุด .css('margin-top')หากเป็นกรณีที่คุณควรจะใช้

คุณกำลังพยายามดึงสไตล์จาก 'img' ซึ่งจะส่งผลให้ (ถ้าคุณมีมากกว่าหนึ่ง) ในอาร์เรย์

สิ่งที่คุณควรทำคือใช้.each()วิธี jquery

ตัวอย่างเช่น:

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

    // Do something with margT
});

Question 9

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

กลับ:

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

รับค่า:

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

แก้ไข:

ใช้ปลั๊กอิน jquery: jquery.sizes.js