jQuery Làm thế nào để Lấy Lề và Phần đệm của Phần tử?

Chỉ cần tự hỏi - làm thế nào sử dụng jQuery - tôi có thể nhận được một phần tử được định dạng tổng số đệm và lề, v.v.? tức là 30px 30px 30px 30px hoặc 30px 5px 15px 30px, v.v.

Tôi đã thử

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

Nhưng điều này không hiệu quả? http://jsfiddle.net/q7Mra/

Theo tài liệu jQuery , thuộc tính CSS viết tắt không được hỗ trợ.

Tùy thuộc vào ý của bạn khi nói "tổng số đệm", bạn có thể làm như sau:

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

Kiểm tra tài liệu API jQuery để biết thông tin về mỗi:

• bên ngoài
• bên trong
• chiều rộng

Đây là jsFiddle đã chỉnh sửa hiển thị kết quả.

Bạn có thể thực hiện cùng một loại thao tác cho Chiều cao để lấy lề, đường viền và phần đệm của nó.

jQuery.css()trả về kích thước tính bằng pixel, ngay cả khi chính CSS chỉ định chúng ở dạng em, hoặc dưới dạng phần trăm, hoặc bất cứ điều gì. Nó nối các đơn vị ('px'), nhưng bạn vẫn có thể sử dụng parseInt()để chuyển chúng thành số nguyên (hoặc parseFloat(), đối với trường hợp các phân số pixel có ý nghĩa).

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

Điều này phù hợp với tôi:

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

Ví dụ kết quả:

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

Để tạo tổng:

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

Biên giới

Tôi tin rằng bạn có thể có được chiều rộng đường viền bằng cách sử dụng .css('border-left-width') . Bạn cũng có thể tìm nạp trên cùng, bên phải và dưới cùng và so sánh chúng để tìm giá trị tối đa. Chìa khóa ở đây là bạn phải chỉ định một mặt cụ thể.

Đệm

Xem jQuery tính toán padding-top dưới dạng số nguyên tính bằng px

Tiền ký quỹ

Sử dụng logic tương tự như đường viền hoặc phần đệm.

Ngoài ra, bạn có thể sử dụng externalWidth . Mã giả phải là
margin = (outerWidth(true) - outerWidth(false)) / 2. Lưu ý rằng điều này chỉ hoạt động để tìm lề theo chiều ngang. Để tìm lề theo chiều dọc, bạn sẽ cần sử dụng externalHeight .

Tôi có một đoạn mã cho thấy, cách lấy khoảng cách giữa các phần tử với 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());
}

Nếu phần tử bạn đang phân tích không có bất kỳ lề, đường viền hoặc bất kỳ điều gì được xác định, bạn sẽ không thể trả lại nó. Ở trên cùng, bạn sẽ có thể nhận được 'tự động', thường là mặc định.

Từ ví dụ của bạn, tôi có thể thấy rằng bạn có margTas biến. Không chắc liệu bạn có đang cố gắng đạt được margin-top hay không. Nếu đó là trường hợp bạn nên sử dụng .css('margin-top').

Bạn cũng đang cố gắng lấy cách điệu từ 'img', điều này sẽ dẫn đến (nếu bạn có nhiều hơn một) trong một mảng.

Những gì bạn nên làm là sử dụng .each()phương thức jquery.

Ví dụ:

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

    // Do something with margT
});

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

trở về:

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

nhận giá trị:

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

Biên tập:

sử dụng jquery plugin: jquery.sizes.js