Remplissage ou valeur de marge en pixels sous forme d'entier à l'aide de jQuery

jQuery a des fonctions height () et width () qui retournent la hauteur ou la largeur en pixels sous forme d'entier ...

Comment puis-je obtenir un remplissage ou une valeur de marge d'un élément en pixels et sous forme d'entier en utilisant jQuery?

Ma première idée a été de faire ce qui suit:

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

Mais si le remplissage est donné en ems par exemple, comment puis-je obtenir la valeur en pixels?

En examinant le plugin JSizes suggéré par Chris Pebble, j'ai réalisé que ma propre version était la bonne :). jQuery retourne toujours la valeur en pixels, donc la simple analyse en entier était la solution.

Merci à Chris Pebble et Ian Robinson

Vous devriez pouvoir utiliser CSS ( http://docs.jquery.com/CSS/css#name ). Vous devrez peut-être être plus précis, comme "padding-left" ou "margin-top".

Exemple:

CSS

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

JS

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

Le résultat est 10px.

Si vous souhaitez obtenir la valeur entière, vous pouvez effectuer les opérations suivantes:

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

Comparez les hauteurs / largeurs extérieures et intérieures pour obtenir la marge totale et le rembourrage:

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

La fonction parseInt a un paramètre "radix" qui définit le système numérique utilisé lors de la conversion, donc appeler parseInt(jQuery('#something').css('margin-left'), 10);renvoie la marge gauche sous forme d'entier.

C'est ce que JSizes utilise.

VEUILLEZ ne pas aller charger une autre bibliothèque juste pour faire quelque chose qui est déjà nativement disponible!

jQuery .css()convertit les% et les em en leur équivalent pixel pour commencer, et parseInt()supprimera le 'px'de la fin de la chaîne retournée et le convertira en un entier:

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

Voici comment obtenir les dimensions environnantes:

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

Faites attention à ce que chaque variable, paddingTopBottompar exemple, contienne la somme des marges des deux côtés de l'élément; à savoir paddingTopBottom == paddingTop + paddingBottom. Je me demande s'il existe un moyen de les obtenir séparément. Bien sûr, s'ils sont égaux, vous pouvez diviser par 2 :)

Cette fonction simple le fera:

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

Usage:

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

Parse int

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

renvoie 0 pour 0px

Vous pouvez simplement les récupérer comme avec n'importe quel attribut CSS :

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

Vous pouvez les définir avec un deuxième attribut dans la méthode css:

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

EDIT: Si vous avez besoin uniquement de la valeur en pixels, utilisez parseInt(val, 10):

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

ok juste pour répondre à la question d'origine:

vous pouvez obtenir le remplissage comme un entier utilisable comme ceci:

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

Si vous avez défini une autre mesure comme px, remplacez simplement "ems" par "px". parseInt interprète la chaîne de caractères comme une valeur erronée, il est donc important de la remplacer par ... rien.

Vous pouvez également étendre vous-même le framework jquery avec quelque chose comme:

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

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

Ajoutant ainsi une fonction sur vos objets jquery appelée margin (), qui retourne une collection comme la fonction offset.

fx.

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

N'utilisez pas string.replace ("px", ""));

Utilisez parseInt ou parseFloat!

J'utilise probablement github.com/bramstein/jsizes plugin jquery pour les rembourrages et les marges de manière très confortable, merci ...

Adopté sans vergogne de Quickredfox .

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

mettre à jour

Modifié en parseInt(val, 10)car il est plus rapide que parseFloat.

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

Pas pour necro mais j'ai fait cela qui peut déterminer les pixels en fonction d'une variété de valeurs:

$.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 cette façon, nous prenons en compte le dimensionnement et l'auto / héritage.