jQuery Wie erhalte ich den Rand und die Polsterung von Elementen?

Ich frage mich nur, wie ich mit jQuery ein Element erhalten kann, das mit Gesamtauffüllung, Rand usw. formatiert ist. dh 30px 30px 30px 30px oder 30px 5px 15px 30px usw.

Ich habe es versucht

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

Aber das funktioniert nicht? http://jsfiddle.net/q7Mra/

Gemäß der jQuery-Dokumentation werden Kurzform-CSS-Eigenschaften nicht unterstützt.

Je nachdem, was Sie unter "Total Padding" verstehen, können Sie möglicherweise Folgendes tun:

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

Überprüfen Sie die jQuery-API-Dokumente auf Informationen zu den folgenden Themen:

• äußere Breite
• innere Breite
• Breite

Hier ist die bearbeitete jsFiddle, die das Ergebnis zeigt.

Sie können dieselbe Art von Operationen für die Höhe ausführen, um den Rand, den Rand und den Abstand zu erhalten.

jQuery.css()Gibt Größen in Pixel zurück, auch wenn das CSS sie selbst in em angibt, oder als Prozentsatz oder was auch immer. Es werden die Einheiten ('px') angehängt, aber Sie können sie trotzdem verwenden parseInt(), um sie in ganze Zahlen (oderparseFloat() wenn Bruchteile von Pixeln sinnvoll sind).

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

Das funktioniert bei mir:

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

Ergebnisbeispiel:

Object {Top: 5, Right: 8, Bottom: 5, Left: 8}

Um insgesamt zu machen:

var TotalPadding = Padding.Top + Padding.Right + Padding.Bottom + Padding.Left;

Rand

Ich glaube, Sie können die Randbreite mit erhalten .css('border-left-width') . Sie können auch oben, rechts und unten abrufen und vergleichen, um den Maximalwert zu ermitteln. Der Schlüssel hier ist, dass Sie eine bestimmte Seite angeben müssen.

Polsterung

Siehe jQuery Berechnen von Padding-Top als Ganzzahl in px

Spanne

Verwenden Sie dieselbe Logik wie Rand oder Abstand.

Alternativ können Sie OuterWidth verwenden . Der Pseudocode sollte sein
margin = (outerWidth(true) - outerWidth(false)) / 2. Beachten Sie, dass dies nur zum horizontalen Ermitteln des Randes funktioniert. Um den Rand vertikal zu finden, müssten Sie OuterHeight verwenden .

Ich habe einen Ausschnitt, der zeigt, wie man mit jQuery die Abstände von Elementen ermittelt:

/* 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());
}

Wenn das zu analysierende Element keinen Rand, Rand oder was auch immer definiert hat, können Sie es nicht zurückgeben. Oben können Sie "Auto" erhalten, was normalerweise die Standardeinstellung ist.

An Ihrem Beispiel kann ich sehen, dass Sie margTals Variable haben. Ich bin mir nicht sicher, ob ich versuche, den oberen Rand zu erreichen. Wenn dies der Fall ist, sollten Sie verwenden .css('margin-top').

Sie versuchen auch, die Stilisierung von 'img' zu erhalten, was (wenn Sie mehr als eine haben) zu einem Array führt.

Was Sie tun sollten, ist die .each()jquery-Methode zu verwenden.

Beispielsweise:

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

    // Do something with margT
});

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

Rückkehr:

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

Wert erhalten:

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

Bearbeiten:

Verwenden Sie das jquery-Plugin: jquery.sizes.js