javascript - sweet - innerhtml que es

Relleno o valor de margen en píxeles como entero usando jQuery

Question

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

¿Cómo puedo obtener un valor de relleno o margen de un elemento en píxeles y como entero utilizando 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 analizar el complemento de 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, así que solo analizarlo a entero fue la solución.

Gracias a Chris Pebble y Ian Robinson

Answer 1

¡POR FAVOR, no vayas a cargar otra biblioteca solo para hacer algo que ya está disponible de forma nativa!

.css() convierte jQuery''s% ''s y em''s a su equivalente en píxeles para comenzar, y parseInt() eliminará el ''px'' del 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>''));
});

Answer 2

Adoptado 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

Answer 3

Analizar int

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

devuelve 0 por 0px

Answer 4

Aquí es cómo 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();

Preste atención a que cada variable, paddingTopBottom por 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 conseguirlos por separado. Por supuesto, si son iguales puedes dividir por 2 :)

Answer 5

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

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

Answer 6

Debería poder utilizar CSS ( http://docs.jquery.com/CSS/css#name ). Puede que tenga que 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"))

Answer 7

Esta simple función lo hará:

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

Uso:

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

Answer 8

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

Esto es lo que usa JSizes.

Answer 9

No a 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, tomamos en cuenta el tamaño y auto / heredar.

Answer 10

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

Utilice parseInt o parseFloat!

Answer 11

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

Answer 12

Puede simplemente tomarlos como con cualquier atributo de CSS :

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

Puedes establecerlos 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);

Answer 13

También puedes extender el framework jquery 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
}};

De este modo, se agrega una función en sus objetos jquery llamada margen (), que devuelve una colección como la función de compensación.

fx

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

Answer 14

ok solo para responder a 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.