jQuery Як отримати маржу та прокладку елемента?

Цікаво, що - як за допомогою 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/

Відповідно до документації jQuery , скорочені властивості CSS не підтримуються.

Залежно від того, що ви маєте на увазі під загальним накладом, ви можете зробити щось подібне:

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

Перевірте документи jQuery API на інформацію про кожен:

• зовнішня ширина
• внутрішня ширина
• ширина

Ось відредагований jsFiddle, що показує результат.

Ви можете виконувати один і той же тип операцій для Height, щоб отримати його запас, межу та прокладку.

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

Маржа

Використовуйте ту саму логіку, що і бордюр або прокладка.

Крім того, ви можете використовувати externalWidth . Псевдокод повинен бути
margin = (outerWidth(true) - outerWidth(false)) / 2. Зауважте, що це працює лише для пошуку поля горизонтально. Щоб знайти поле вертикально, вам потрібно буде використовувати externalHeight .

У мене є фрагмент, який показує, як отримати інтервали між елементами 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());
}

Якщо елемент, який ви аналізуєте, не має жодної межі, межі чи того, що визначено, ви не зможете його повернути. У вершинах ви зможете отримати "авто", що зазвичай є типовим.

З вашого прикладу я бачу, що ви маєте 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
});

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

повернення:

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

отримати значення:

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

Редагувати:

використовувати плагін jquery: jquery.sizes.js