Auffüllen oder Randwert in Pixel als Ganzzahl mit jQuery

jQuery verfügt über die Funktionen height () und width (), die die Höhe oder Breite in Pixel als Ganzzahl ... zurückgeben.

Wie kann ich mit jQuery einen Füll- oder Randwert eines Elements in Pixel und als Ganzzahl abrufen?

Meine erste Idee war, Folgendes zu tun:

var padding = parseInt(jQuery("myId").css("padding-top"));

Aber wie kann ich den Wert in Pixel erhalten, wenn zum Beispiel in ems eine Auffüllung angegeben ist?

Als ich mir das von Chris Pebble vorgeschlagene JSizes-Plugin ansah, stellte ich fest, dass meine eigene Version die richtige war :). jQuery gibt immer einen Wert in Pixel zurück, daher war es die Lösung, ihn nur auf eine Ganzzahl zu analysieren.

Vielen Dank an Chris Pebble und Ian Robinson

Sie sollten in der Lage sein, CSS zu verwenden ( http://docs.jquery.com/CSS/css#name ). Möglicherweise müssen Sie spezifischer sein, z. B. "links auffüllen" oder "oben am Rand".

Beispiel:

CSS

a, a:link, a:hover, a:visited, a:active {color:black;margin-top:10px;text-decoration: none;}

JS

$("a").css("margin-top");

Das Ergebnis ist 10px.

Wenn Sie den ganzzahligen Wert erhalten möchten, können Sie Folgendes tun:

parseInt($("a").css("margin-top"))

Vergleichen Sie die äußere und innere Höhe / Breite, um den Gesamtrand und die Polsterung zu erhalten:

var that = $("#myId");
alert(that.outerHeight(true) - that.innerHeight());

Die parseInt-Funktion verfügt über einen "radix" -Parameter, der das bei der Konvertierung verwendete Zahlensystem definiert. Beim Aufrufen wird parseInt(jQuery('#something').css('margin-left'), 10);der linke Rand als Ganzzahl zurückgegeben.

Dies ist, was JSizes verwenden.

BITTE laden Sie keine andere Bibliothek, nur um etwas zu tun, das bereits nativ verfügbar ist!

jQuery's .css()konvertiert zunächst% und em in ihre Pixeläquivalente und parseInt()entfernt die 'px'vom Ende der zurückgegebenen Zeichenfolge und konvertiert sie in eine Ganzzahl:

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

So erhalten Sie die umliegenden Dimensionen:

var elem = $('#myId');

var marginTopBottom  = elem.outerHeight(true) - elem.outerHeight();
var marginLeftRight  = elem.outerWidth(true)  - elem.outerWidth();

var borderTopBottom  = elem.outerHeight() - elem.innerHeight();
var borderLeftRight  = elem.outerWidth()  - elem.innerWidth();

var paddingTopBottom  = elem.innerHeight() - elem.height();
var paddingLeftRight  = elem.innerWidth()  - elem.width();

Beachten Sie, dass jede Variable paddingTopBottombeispielsweise die Summe der Ränder auf beiden Seiten des Elements enthält. dh , paddingTopBottom == paddingTop + paddingBottom. Ich frage mich, ob es eine Möglichkeit gibt, sie separat zu erhalten. Wenn sie gleich sind, können Sie natürlich durch 2 teilen :)

Diese einfache Funktion wird es tun:

$.fn.pixels = function(property) {
    return parseInt(this.css(property).slice(0,-2));
};

Verwendung:

var padding = $('#myId').pixels('paddingTop');

Parse int

parseInt(canvas.css("margin-left")); 

gibt 0 für 0px zurück

Sie können sie wie bei jedem CSS-Attribut abrufen :

alert($("#mybox").css("padding-right"));
alert($("#mybox").css("margin-bottom"));

Sie können sie mit einem zweiten Attribut in der CSS-Methode festlegen:

$("#mybox").css("padding-right", "20px");

BEARBEITEN: Wenn Sie nur den Pixelwert benötigen, verwenden Sie parseInt(val, 10):

parseInt($("#mybox").css("padding-right", "20px"), 10);

ok nur um die ursprüngliche Frage zu beantworten:

Sie können die Auffüllung als verwendbare Ganzzahl wie folgt erhalten:

var padding = parseInt ($ ("myId"). css ("padding-top"). replace ("ems", ""));

Wenn Sie eine andere Messung wie px definiert haben, ersetzen Sie einfach "ems" durch "px". parseInt interpretiert den Stringpart als falschen Wert, daher ist es wichtig, ihn durch ... nichts zu ersetzen.

Sie können das jquery-Framework auch selbst um Folgendes erweitern:

jQuery.fn.margin = function() {
var marginTop = this.outerHeight(true) - this.outerHeight();
var marginLeft = this.outerWidth(true) - this.outerWidth();

return {
    top: marginTop,
    left: marginLeft
}};

Fügen Sie dabei Ihren jquery-Objekten eine Funktion namens margin () hinzu, die eine Auflistung wie die Offset-Funktion zurückgibt.

fx.

$("#myObject").margin().top

Verwenden Sie nicht string.replace ("px", ""));

Verwenden Sie parseInt oder parseFloat!

Ich benutze wahrscheinlich das gquub-Plugin github.com/bramstein/jsizes für Auffüllungen und Ränder auf sehr komfortable Weise. Danke ...

Schamlos von Quickredfox übernommen .

jQuersy.fn.cssNum = function(){
    return parseInt(jQuery.fn.css.apply(this, arguments), 10);
};

aktualisieren

Geändert zu parseInt(val, 10)da es schneller ist als parseFloat.

http://jsperf.com/number-vs-plus-vs-toint-vs-tofloat/20

Nicht zu Nekro, aber ich habe dies gemacht, das Pixel basierend auf einer Vielzahl von Werten bestimmen kann:

$.fn.extend({
  pixels: function (property, base) {
    var value = $(this).css(property);
    var original = value;
    var outer = property.indexOf('left') != -1 || property.indexOf('right') != -1 
      ? $(this).parent().outerWidth()
      : $(this).parent().outerHeight();

    // EM Conversion Factor
    base = base || 16;

    if (value == 'auto' || value == 'inherit') 
        return outer || 0;

    value = value.replace('rem', '');
    value = value.replace('em', '');

    if (value !== original) {
       value = parseFloat(value);
       return value ? base * value : 0;
    }

    value = value.replace('pt', '');

    if (value !== original) {
       value = parseFloat(value);
       return value ? value * 1.333333 : 0; // 1pt = 1.333px
    }

    value = value.replace('%', '');

    if (value !== original) {
      value = parseFloat(value);
      return value ? (outer * value / 100) : 0;
    }

    value = value.replace('px', '');
    return parseFloat(value) || 0;
  }
});

Auf diese Weise berücksichtigen wir die Größenbestimmung und Auto / Erben.