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".

``````  (parseInt("40px".replace(/px/,""))+60)+"px"
``````
• That gives me "4060px" in the chrome console log. However using parseInt as suggested by other answers I get "100px" from this modification: `(parseInt("40px".replace(/px/,""))+60)+"px"` – joshuahedlund Feb 17 '12 at 18:10
• Right, my mistake, should put the number in front, otherwise it adds strings. parseInt makes number out of string, so should work well too. – Roman Goyenko Feb 17 '12 at 21:11

Probably the most efficient way is

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

The `10`'s in the parseInt calls are necessary to protect against the value being mistakenly calculated in something other than base 10.

• Doesn't seem to work on Chrome, I seem to get a NaN until the 'px' component is removed – sradforth Aug 11 '13 at 9:24
• I think this is better answer, as 1: question was: two variables with values "60px" and "40px", and in accepted answer the second value is not a variable, 2: `parseInt` will convert '40px' to 40, so there is no need for `replace(/px/,"")`. Adding `+ "px"` should convert Integer to String, same way as it's doing it in the accepted answer. This solution is working as it should, so can someone explain why would @wheresrhys be getting NaN? – papo Oct 30 '16 at 16:17

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).

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

`parseFloat` will parse only the prefix of the string that is a number.

You can do this by parsing the css.left value of the object, somewhat like this:

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

But you should keep in mind, that the css.left value might not be `px` but also `%`, `em`, etc. so the clean way would be using jQuery offset method as that would give you the correct pixels value.

``````\$('#object2').css('left', (\$('#object1').offset().left + 60) + 'px');
``````
{"ft_lang_label":"__label__en","ft_lang_prob":0.82083505,"math_prob":0.935282,"size":404,"snap":"2020-10-2020-16","text_gpt3_token_len":101,"char_repetition_ratio":0.1075,"word_repetition_ratio":0.0,"special_character_ratio":0.2920792,"punctuation_ratio":0.11392405,"nsfw_num_words":0,"has_unicode_error":false,"math_prob_llama3":0.9838353,"pos_list":[0],"im_url_duplicate_count":[null],"WARC_HEADER":"{\"WARC-Type\":\"response\",\"WARC-Date\":\"2020-02-19T04:06:57Z\",\"WARC-Record-ID\":\"<urn:uuid:b2c771bf-deda-44d0-a6d7-0d910f2056a3>\",\"Content-Length\":\"167263\",\"Content-Type\":\"application/http; msgtype=response\",\"WARC-Warcinfo-ID\":\"<urn:uuid:43026ac6-728c-4ce9-a439-e54c19c3e508>\",\"WARC-Concurrent-To\":\"<urn:uuid:316d2e14-9d34-4240-b0c7-3801a80a218a>\",\"WARC-IP-Address\":\"151.101.65.69\",\"WARC-Target-URI\":\"https://stackoverflow.com/questions/9333036/add-javascript-pixel-values/9333070\",\"WARC-Payload-Digest\":\"sha1:KOS7HEIO2WCGGKP5KZ2QTRM6UT6OPMT7\",\"WARC-Block-Digest\":\"sha1:VKRKDTXGPVPEBZLM5ZIUXH2MJVN7FW2V\",\"WARC-Identified-Payload-Type\":\"text/html\",\"warc_filename\":\"/cc_download/warc_2020/CC-MAIN-2020-10/CC-MAIN-2020-10_segments_1581875144027.33_warc_CC-MAIN-20200219030731-20200219060731-00227.warc.gz\"}"}