JQuery Как получить маржу элемента и заполнение?

Ответ 1

Согласно документации jQuery, сокращенные CSS-свойства не поддерживаются.

В зависимости от того, что вы подразумеваете под "полным заполнением", вы можете сделать что-то вроде этого:

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

Ответ 2

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
• width

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

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

Ответ 3

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

Ответ 4

Граница

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

Перетяжка

См. jQuery вычисляет padding-top как целое число в px

Margin

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

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

Ответ 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;

Ответ 6

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

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

Ответ 7

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

Возврат:

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

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

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

Edit:

использовать плагин jquery: jquery.sizes.js