webentwicklung-frage-antwort-db.com.de

Auffüll- oder Randwert in Pixel als Ganzzahl mit jQuery

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

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

Meine erste Idee war Folgendes:

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

Aber wie kann ich den Wert in Pixeln erhalten, wenn beispielsweise 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 in eine Ganzzahl zu zerlegen.

Vielen Dank an Chris Pebble und Ian Robinson

203
Malik Amurlayev

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

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"))
224
Ian Robinson

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

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

Die parseInt-Funktion hat einen "radix" -Parameter, der das für die Konvertierung verwendete Zahlensystem definiert. Der Aufruf von parseInt(jQuery('#something').css('margin-left'), 10); gibt den linken Rand als Ganzzahl zurück.

Dies ist, was JSizes verwendet.

35
guigouz

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

jQueries .css() konvertiert% 's und ems zunächst in ihre Pixeläquivalente, und parseInt() entfernt die 'px' vom Ende der zurückgegebenen Zeichenfolge und konvertieren Sie es 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>'));
});
30
RavenHursT

Hier ist, wie Sie die umliegenden Dimensionen bekommen können:

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

Achten Sie darauf, dass jede Variable, z. B. paddingTopBottom, die Summe der Ränder auf beiden Seiten des Elements enthält. d.h. paddingTopBottom == paddingTop + paddingBottom. Ich frage mich, ob es einen Weg gibt, sie getrennt zu bekommen. Natürlich, wenn sie gleich sind, können Sie durch 2 teilen :)

11
FireAphis

Sie können sie einfach wie mit ein beliebiges CSS-Attribut :

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);
9
Robert Grant

Diese einfache Funktion wird es tun:

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

Verwendungszweck:

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

Parse int

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

gibt 0 für 0px zurück

9
a53-416

ok nur um die ursprüngliche frage zu beantworten:

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

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

Wenn Sie ein anderes Maß wie px definiert haben, ersetzen Sie "ems" durch "px". parseInt interpretiert den String als falschen Wert, daher ist es wichtig, ihn durch ... nothing zu ersetzen.

3
EeKay

Sie können das jquery-Framework auch selbst erweitern, indem Sie Folgendes eingeben:

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 Ihren jquery-Objekten eine Funktion hinzu, die margin () genannt wird und eine Sammlung wie die Offset-Funktion zurückgibt.

fx.

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

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

Verwenden Sie parseInt oder parseFloat!

1
RubbelDeCatc

Nicht zu nekrotisch, 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ößenänderung und das automatische Erben.

0
Nijikokun

Schamlos übernommen von Quickredfox .

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

update

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

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

0
yckart

Ich benutze wahrscheinlich github.com/bramstein/jsizes jquery Plugin für Auffüllungen und Ränder auf sehr bequeme Weise, Danke ...

0
Mustafah