jQuery Как получить маржу и отступы элемента? - PullRequest
Новая
       11

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

94 голосов
/ 14 сентября 2011

Просто интересно - как с помощью 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/

Ответы [ 8 ]

186 голосов
/ 14 сентября 2011 
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 , показывающий результат.

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

95 голосов
/ 14 сентября 2011

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

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

var $img = $('img');
var paddT = $img.css('padding-top') + ' ' + $img.css('padding-right') + ' ' + $img.css('padding-bottom') + ' ' + $img.css('padding-left');
16 голосов
/ 07 декабря 2013

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>'));
});
3 голосов
/ 27 мая 2016

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

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;
2 голосов
/ 31 марта 2018

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

Граница

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

Заполнение

См. jQuery вычисляет верхнюю кромку как целое число в пикселях

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

0 голосов
/ 12 ноября 2015 
$('img').margin() or $('img').padding()

возврат: 

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

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

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

Edit:

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

0 голосов
/ 14 сентября 2011

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

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