Valor de preenchimento ou margem em pixels como número inteiro usando jQuery

O jQuery possui as funções height () en width () que retornam a altura ou largura em pixels como número inteiro ...

Como posso obter um valor de preenchimento ou margem de um elemento em pixels e como inteiro usando jQuery?

Minha primeira ideia foi fazer o seguinte:

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

Mas se o preenchimento é fornecido no ems, por exemplo, como posso obter o valor em pixels?

Olhando para o plugin JSizes sugerido por Chris Pebble, percebi que minha própria versão era a correta :). O jQuery retorna sempre o valor em pixels; portanto, apenas a análise foi feita em número inteiro.

Agradecimentos a Chris Pebble e Ian Robinson

Você deve poder usar CSS ( http://docs.jquery.com/CSS/css#name ). Pode ser necessário ser mais específico, como "padding-left" ou "margin-top".

Exemplo:

CSS

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

JS

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

O resultado é 10px.

Se você deseja obter o valor inteiro, pode fazer o seguinte:

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

Compare a altura / largura externa e interna para obter a margem total e o preenchimento:

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

A função parseInt possui um parâmetro "radix" que define o sistema numérico usado na conversão, portanto, a chamada parseInt(jQuery('#something').css('margin-left'), 10);retorna a margem esquerda como um número inteiro.

É isso que o JSizes usa.

POR FAVOR, não carregue outra biblioteca apenas para fazer algo que já esteja disponível de forma nativa!

O jQuery's .css()converte% 'e em's em seu equivalente de pixel para começar e parseInt()removerá 'px'o final da string retornada e o converterá em um número inteiro:

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

Veja como você pode obter as dimensões 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();

Preste atenção que cada variável, paddingTopBottompor exemplo, contém a soma das margens nos dois lados do elemento; ou seja, paddingTopBottom == paddingTop + paddingBottom. Gostaria de saber se existe uma maneira de obtê-los separadamente. Claro, se eles são iguais, você pode dividir por 2 :)

Esta função simples fará isso:

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

retorna 0 para 0 px

Você pode simplesmente pegá-los como em qualquer atributo CSS :

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

Você pode configurá-los com um segundo atributo no método css:

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

EDIT: Se você precisar apenas do valor de pixel, use parseInt(val, 10):

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

ok apenas para responder à pergunta original:

você pode obter o preenchimento como um número inteiro utilizável como este:

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

Se você definiu outra medida como px, substitua "ems" por "px". parseInt interpreta o stringpart como um valor errado, portanto é importante substituí-lo por ... nothing.

Você também pode estender a estrutura do jquery com 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
}};

Adicionando uma função aos objetos jquery, denominada margin (), que retorna uma coleção como a função offset.

fx.

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

Não use string.replace ("px", ""));

Use parseInt ou parseFloat!

Eu provavelmente uso o plugin jquery github.com/bramstein/jsizes para preenchimentos e margens de maneira muito confortável, Obrigado ...

Vergonhosamente adotado da Quickredfox .

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

atualizar

Alterado para, parseInt(val, 10)pois é mais rápido que parseFloat.

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

Não para necro, mas eu fiz isso que pode determinar pixels com base em uma variedade 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;
  }
});

Dessa forma, levamos em conta o dimensionamento e a herança automática.