jQuery как получить поля и отступы элемента?

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

проверьте документы API jQuery для получения информации о каждом:

• outerWidth
• innerWidth
• ширина

вот отредактировал jsFiddle показывать результат.

вы можете выполнить тот же тип операций для высоты, чтобы получить ее поля, границы и отступы.

jQuery.css() возвращает размеры в пикселях, даже если сам CSS указывает их в em, или в процентах, или что-то еще. Он добавляет единицы ('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>'));
});

это работает для меня:

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;

границы

Я считаю, что вы можете получить ширину границы с помощью .css('border-left-width'). Вы также можете выбрать верхнюю, правую и нижнюю части и сравнить их, чтобы найти максимальное значение. Ключ здесь в том, что вы должны указать конкретную сторону.

обивка

посмотреть jQuery вычислить padding-top как целое число в px

рентабельность

используйте ту же логику, что и граница или заполнение.

в качестве альтернативы, вы можете использовать outerWidth. Псевдо-код должен быть
margin = (outerWidth(true) - outerWidth(false)) / 2. Обратите внимание, что это работает только для поиска поля по горизонтали. Чтобы найти маржу по вертикали, вам нужно будет использовать outerHeight.

если элемент, который вы анализируете, не имеет маржи, границы или чего-либо еще определенного, вы не сможете его вернуть. На вершинах вы сможете получить "авто", который обычно по умолчанию.

из вашего примера я вижу, что у вас есть 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
});

У меня есть фрагмент, который показывает, как получить расстояний элементов с помощью 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());
}

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

return:

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

получить значение:

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

Edit:

используйте плагин jquery:jquery.размеры.js