Riempimento o valore del margine in pixel come numero intero usando jQuery

jQuery ha funzioni height () en width () che restituisce l'altezza o la larghezza in pixel come numero intero ...

Come posso ottenere un riempimento o un valore di margine di un elemento in pixel e come numero intero usando jQuery?

La mia prima idea era di fare quanto segue:

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

Ma se il riempimento viene fornito in ems, ad esempio, come posso ottenere il valore in pixel?

Guardando il plugin JSizes suggerito da Chris Pebble mi sono reso conto che la mia versione era quella giusta :). jQuery restituisce sempre un valore in pixel, quindi la soluzione era solo l'analisi di un numero intero.

Grazie a Chris Pebble e Ian Robinson

Dovresti essere in grado di usare CSS ( http://docs.jquery.com/CSS/css#name ). Potrebbe essere necessario essere più specifici come "padding-left" o "margin-top".

Esempio:

CSS

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

JS

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

Il risultato è 10px.

Se si desidera ottenere il valore intero, è possibile effettuare le seguenti operazioni:

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

Confronta altezza / larghezza esterne ed interne per ottenere il margine totale e l'imbottitura:

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

La funzione parseInt ha un parametro "radix" che definisce il sistema numerico utilizzato sulla conversione, quindi la chiamata parseInt(jQuery('#something').css('margin-left'), 10);restituisce il margine sinistro come intero.

Questo è quello che usano JSizes.

PER FAVORE non andare a caricare un'altra libreria solo per fare qualcosa che è già nativamente disponibile!

jQuery's .css()converte% 's ed em's nel loro equivalente pixel per cominciare, e parseInt()rimuoverà 'px'la fine della stringa restituita e la convertirà in un numero intero:

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

Ecco come puoi ottenere le dimensioni circostanti:

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

Prestare attenzione che ogni variabile, paddingTopBottomad esempio, contenga la somma dei margini su entrambi i lati dell'elemento; Per esempio, paddingTopBottom == paddingTop + paddingBottom. Mi chiedo se c'è un modo per ottenerli separatamente. Naturalmente, se sono uguali, puoi dividere per 2 :)

Questa semplice funzione lo farà:

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

Uso:

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

Parse int

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

restituisce 0 per 0px

Puoi semplicemente afferrarli come con qualsiasi attributo CSS :

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

Puoi impostarli con un secondo attributo nel metodo css:

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

EDIT: se hai bisogno solo del valore in pixel, usa parseInt(val, 10):

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

ok solo per rispondere alla domanda originale:

puoi ottenere il riempimento come intero utilizzabile come questo:

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

Se hai definito un'altra misura come px basta sostituire "ems" con "px". parseInt interpreta la stringa come un valore errato, quindi è importante sostituirla con ... nulla.

Puoi anche estendere tu stesso il framework jquery con qualcosa del tipo:

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

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

Quindi aggiungendo una funzione sui tuoi oggetti jquery chiamata margin (), che restituisce una collezione come la funzione offset.

fx.

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

Non usare string.replace ("px", ""));

Usa parseInt o parseFloat!

Probabilmente utilizzo github.com/bramstein/jsizes plugin jquery per imbottiture e margini in modo molto comodo, grazie ...

Spudoratamente adottato da Quickredfox .

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

aggiornare

Modificato in parseInt(val, 10)poiché è più veloce di parseFloat.

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

Non per necro ma ho fatto questo che può determinare i pixel in base a una varietà di valori:

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

In questo modo, prendiamo in considerazione il dimensionamento e l'auto / eredità.