web-dev-qa-db-fra.com

Valeur de remplissage ou de marge en pixels sous forme d'entier avec jQuery

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

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

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

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

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

En regardant dans le plugin JSizes suggéré par Chris Pebble, j'ai réalisé que ma propre version était la bonne :). jQuery renvoie toujours la valeur en pixels, la solution était donc de l’analyser en entier.

Merci à Chris Pebble et Ian Robinson

javascriptjquerycss
203
Malik Amurlayev

Vous devriez pouvoir utiliser CSS ( http://docs.jquery.com/CSS/css#name ). Vous devrez peut-être être plus spécifique tel que "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 procéder comme suit:

parseInt($("a").css("margin-top"))
224
Ian Robinson

Comparez la hauteur et la largeur intérieures et extérieures pour obtenir la marge et le rembourrage totaux:

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

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

C'est ce que JSizes utilise.

35
guigouz

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

la fonction .css() de jQuery convertit les balises% et em en leur équivalent en pixels pour commencer, et parseInt() supprime le 'px' de la fin de la chaîne renvoyée et le convertit 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>'));
});
30
RavenHursT

Voici comment vous pouvez obtenir les dimensions correspondantes:

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

Veillez à ce que chaque variable, paddingTopBottom par exemple, contienne la somme des marges des deux côtés de l'élément; c'est-à-dire paddingTopBottom == paddingTop + paddingBottom. Je me demande s'il existe un moyen de les obtenir séparément. Bien sûr, si elles sont égales, vous pouvez diviser par 2 :)

11
FireAphis

Vous pouvez simplement les récupérer comme avec tout 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 n’avez besoin que de la valeur en pixels, utilisez parseInt(val, 10):

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

Cette fonction simple le fera:

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

Usage:

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

Analyse int

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

renvoie 0 pour 0px

9
a53-416

ok juste pour répondre à la question initiale:

vous pouvez obtenir le remplissage sous la forme d'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 comme une valeur fausse, il est donc important de la remplacer par ... rien.

3
EeKay

Vous pouvez également étendre vous-même le cadre 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
}};

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

fx.

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

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

Utilisez parseInt ou parseFloat!

1
RubbelDeCatc

Pas pour necro mais j'ai fait ceci qui peut déterminer des pixels basés sur 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 pour le dimensionnement, et auto/hériter.

0
Nijikokun

Sans vergogne adopté de Quickredfox .

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

mettre à jour

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

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

0
yckart

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

0
Mustafah