¿Añadir valores de píxeles de JavaScript?

Question

¿Hay alguna manera en javascript/jQuery de tomar dos variables con valores "60px" y "40px" y agregarlas para obtener "100px"?

o en un sentido más general, estoy tratando de calcular las posiciones de los objetos en relación con otros objetos y sería muy conveniente si podía hacer algo como esto:

$('#object2').css('left', $('#object1').css('left')+'60px'); 

Por supuesto, eso sólo da en "40px60px" no válido.

Answer 1

quitar píxeles de cuerdas, agregar valores, a continuación, añadir px volver

(parseInt("40px".replace(/px/,""))+60)+"px" 

Answer 2

Usted está buscando la función parseInt().

var left1 = "40px"; 
var left2 = "60px"; 

// Add the integer values of the left values together 
var leftTotal = parseInt(left1, 10) + parseInt(left2, 10) + "px"; 

También vale la pena investigar es el método parseFloat(). Hace lo mismo que parseInt(), pero funciona en números con decimales (también conocidos como valores de coma flotante).

Answer 3

Usted puede hacer esto mediante el análisis del valor css.left del objeto, algo como esto:

$('#object2').css('left', (parseInt($('#object1').css('left')) + 60) + 'px'); 

embargo, usted debe tener en cuenta, que el valor css.left podría no ser px pero también %, em, etc. así que la manera limpia sería usar jQuery offset method ya que eso le daría el valor de píxeles correcto.

$('#object2').css('left', ($('#object1').offset().left + 60) + 'px'); 

Answer 4

var shiftedRight = (parseFloat($('#object1').css('left')) + 60) + 'px'; 
$('#object2').css('left', shiftedRight); 

parseFloat analizará sólo el prefijo de la cadena que es un número.

Answer 5

Probablemente la forma más eficiente es

parseInt("40px", 10) + parseInt("60px", 10) + "px" 

Los 10 's en las llamadas parseInt sean necesarias para proteger contra el valor que se calcula por error en algo que no sea la base 10.