Valor de margen o margen en píxeles como entero utilizando jQuery

jQuery tiene funciones height () en width () que devuelve la altura o el ancho en píxeles como entero ...

¿Cómo puedo obtener un valor de margen o margen de un elemento en píxeles y como entero usando jQuery?

Mi primera idea fue hacer lo siguiente:

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

Pero si el relleno se da en ems, por ejemplo, ¿cómo puedo obtener el valor en píxeles?

Al examinar el complemento JSizes sugerido por Chris Pebble, me di cuenta de que mi propia versión era la correcta :). jQuery devuelve siempre el valor en píxeles, por lo que solo analizarlo como entero fue la solución.

Gracias a Chris Pebble e Ian Robinson

Debería poder usar CSS ( http://docs.jquery.com/CSS/css#name ). Es posible que deba ser más específico, como "padding-left" o "margin-top".

Ejemplo:

CSS

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

JS

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

El resultado es 10px.

Si desea obtener el valor entero, puede hacer lo siguiente:

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

Compare la altura / anchura exterior e interior para obtener el margen total y el relleno:

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

La función parseInt tiene un parámetro "radix" que define el sistema de numeración utilizado en la conversión, por lo que llamar parseInt(jQuery('#something').css('margin-left'), 10);devuelve el margen izquierdo como un entero.

Esto es lo que usa JSizes.

¡NO cargue otra biblioteca solo para hacer algo que ya está disponible de forma nativa!

.css()Para empezar, jQuery's convierte% 'sy em a su equivalente en píxeles, y parseInt()eliminará 'px'el final de la cadena devuelta y lo convertirá en un entero:

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

Así es como puede obtener las dimensiones circundantes:

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

Tenga en cuenta que cada variable, paddingTopBottompor ejemplo, contiene la suma de los márgenes en ambos lados del elemento; es decir, paddingTopBottom == paddingTop + paddingBottom. Me pregunto si hay una manera de obtenerlos por separado. Por supuesto, si son iguales, puedes dividir por 2 :)

Esta simple función lo hará:

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

devuelve 0 para 0px

Simplemente puede tomarlos como con cualquier atributo CSS :

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

Puede configurarlos con un segundo atributo en el método css:

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

EDITAR: si solo necesita el valor de píxel, use parseInt(val, 10):

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

ok solo para responder la pregunta original:

puede obtener el relleno como un entero utilizable como este:

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

Si ha definido otra medida como px, simplemente reemplace "ems" con "px". parseInt interpreta el stringpart como un valor incorrecto, por lo que es importante reemplazarlo con ... nada.

También puede extender el marco jquery usted mismo con algo como:

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

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

Agregando así una función en sus objetos jquery llamada margin (), que devuelve una colección como la función offset.

fx.

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

No use string.replace ("px", ""));

Utilice parseInt o parseFloat!

Probablemente use github.com/bramstein/jsizes jquery plugin para rellenos y márgenes de una manera muy cómoda, gracias ...

Adoptada descaradamente de Quickredfox .

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

actualizar

Cambiado a parseInt(val, 10)ya que es más rápido que parseFloat.

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

No para necro, pero hice esto que puede determinar los píxeles en función de una variedad de valores:

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

De esta manera, tenemos en cuenta el tamaño y el auto / herencia.