Add javascript pixel values?

Question

Is there a way in javascript/jQuery to take two variables with values "60px" and "40px" and add them together to get "100px"?

Or in a more general sense, I'm trying to calculate positions of objects relative to other objects and it would be really convenient if I could do something like this:

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

Of course, that just gives in invalid "40px60px".

Answer 1

remove px from strings, add values, then add px back

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

Answer 2

You're looking for the parseInt() function.

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

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

Also worth investigating is the parseFloat() method. It does the same thing as parseInt(), but works on numbers with decimals (aka floating point values).