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


105

Просто интересно - как с помощью jQuery - я могу получить элементы, отформатированные для общего заполнения и поля и т. Д.? т.е. 30 пикселей 30 пикселей 30 пикселей 30 пикселей или 30 пикселей 5 пикселей 15 пикселей 30 пикселей и т. д.

Я попытался

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

Но это не работает? http://jsfiddle.net/q7Mra/



Пожалуйста, обратитесь к приведенной ниже ссылке, которая чем-то похожа. stackoverflow.com/questions/590602/…
Praveen

Ответы:


105

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

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

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

да, кажется, вы должны делать каждый индивидуально :( что отстой
Том

27
Не вытаскивайте его вот так. Что делать, если есть autoили 2%или inherit?
Гонки за легкостью на орбите

@Dan - очень ценю усилия, Дэн. извиняюсь за то, что не пояснил больше :( Извините, что потратил ваше время.
Том

3
Вы правы насчет нечисловых значений. Я думаю, что ответ Дэна Шорта более здравый.
Элиас Замария

4
update : Начиная с jQuery 1.9, передача массива свойств стиля в .css () приведет к созданию объекта пар свойство-значение. Например, чтобы получить все четыре отображаемых значения ширины границы, вы можете использовать$( elem ).css([ "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth" ]).
Hussein Nazzal

193
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:

Вот отредактированный jsFiddle, показывающий результат.

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


1
В этом случае вы можете взять рассчитанные значения, добавить «px» и получить значения пикселей.
Дэн Шорт

2
Вам нужно обновить свой вопрос, чтобы это было понятно. В противном случае мы тратим время на написание решений проблем, которые вы не пытаетесь решить :). Объясните в своем вопросе, какие возвращаемые значения вы хотите получить. Вы запросили общую маржу и заполнение элемента, а не отдельные значения маржи (которые могут быть разными для margin-leftи margin-right, а могут быть emи px.
Дэн Шорт,

2
Да, но это было мое изменение вашего вопроса, а не ваш исходный вопрос :)
Дэн Шорт,

4
Это очень полезно; что делать, если значения левого и правого полей / отступов различны, и вы хотите, например, только значение левого поля или заполнения?
jpap

1
Разве верхнее поле не связано с heightне width?
JohnK

16

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

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

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

Граница

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

Обивка

См. JQuery Calculate padding-top как целое число в пикселях

Прибыль

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

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


Ваша стратегия маржи не работает в Firefox, она будет возвращать 0 каждый раз, если у вас есть «автоматическое» горизонтальное заполнение, например, для центрирования элемента.
Бен Дилтс

2

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

0

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

Из вашего примера я вижу, что у вас есть margTпеременная as. Не уверен, что пытаетесь получить максимальную маржу. В таком случае вам следует использовать .css('margin-top').

Вы также пытаетесь получить стилизацию из img, что приведет (если у вас их более одного) в массив.

Что вам следует сделать, так это использовать .each()метод jquery.

Например:

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

    // Do something with margT
});

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.