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

105

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/

Tom
quelle
Bitte beziehen Sie sich auf den folgenden Link, der ähnlich ist. stackoverflow.com/questions/590602/…
Praveen

Antworten:

105

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');
Elias Zamaria
quelle
Ja, Sie müssen jeden einzeln machen :( was scheiße ist
Tom
27
Ziehen Sie es nicht so heraus. Was ist, wenn man autooder 2%oder ist inherit?
Leichtigkeitsrennen im Orbit
@ Dan - wirklich schätzen die Mühe Dan. Entschuldigung, dass Sie nicht mehr
Tom
3
Sie haben Recht mit nicht numerischen Werten. Ich denke, die Antwort von Dan Short ist robuster.
Elias Zamaria
4
Update : Ab jQuery 1.9 führt das Übergeben eines Arrays von Stileigenschaften an .css () zu einem Objekt mit Eigenschaft-Wert-Paaren. Um beispielsweise alle vier gerenderten $( elem ).css([ "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth" ]).
Randbreitenwerte abzurufen
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';

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

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.

Dan Short
quelle
1
Wenn dies der Fall ist, können Sie die berechneten Werte nehmen, 'px' anhängen und Sie haben die Pixelwerte.
Dan Short
2
Sie müssen Ihre Frage aktualisieren, um dies dann klar zu machen. Andernfalls verschwenden wir Zeit damit, Lösungen für Probleme zu schreiben, die Sie nicht lösen möchten :). Erklären Sie in Ihrer Frage genau die gewünschten Rückgabewerte. Sie haben nach dem Gesamtrand und dem Auffüllen des Elements gefragt , nicht nach den einzelnen Randwerten (die für margin-leftund margin-rightunterschiedlich sein können und emoder sein können px.
Dan Short
2
Es ist, aber das war meine Bearbeitung Ihrer Frage, nicht Ihre ursprüngliche Frage :)
Dan Short
4
Das ist sehr nützlich; Was tun, wenn der linke und der rechte Rand / die Auffüllwerte unterschiedlich sind und Sie beispielsweise nur den linken Rand oder den Auffüllwert möchten?
jpap
1
Ist der obere Rand nicht mit dem heightnicht verbunden width?
JohnK
16

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

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;
Brutus
quelle
2

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 .

Simshaun
quelle
Ihre Strategie für den Rand funktioniert in Firefox nicht. Sie gibt jedes Mal 0 zurück, wenn Sie über eine "automatische" horizontale Auffüllung verfügen, um beispielsweise das Element zu zentrieren.
Ben Dilts
2

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());
}
Andreas
quelle
0

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
});
José P. Airosa
quelle
-1
$('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

WantToDo
quelle
1
Ich sehe keine margin () -Funktion in jQuery.
Ortomala Lokni