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

For JS Devs those who landed on this page searching for this - Beware you are reaching new heights of procrastination ! — Sarasranglt
– Sarasranglt, Commented Feb 27, 2020 at 3:52

joshuahedlund · Accepted Answer · 2012-02-17 22:18:46Z

26

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

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

edited Feb 17, 2012 at 22:18

joshuahedlund

1,7822 gold badges20 silver badges26 bronze badges

answered Feb 17, 2012 at 17:56

Roman Goyenko

7,1027 gold badges56 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

joshuahedlund Over a year ago

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"

Roman Goyenko Over a year ago

Right, my mistake, should put the number in front, otherwise it adds strings. parseInt makes number out of string, so should work well too.

Daniel Szabo · Accepted Answer · 2014-09-25 17:41:29Z

11

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

edited Sep 25, 2014 at 17:41

answered Feb 17, 2012 at 18:00

Daniel Szabo

7,2817 gold badges52 silver badges70 bronze badges

Comments

wheresrhys · Accepted Answer · 2012-02-17 22:28:00Z

7

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.

answered Feb 17, 2012 at 22:28

wheresrhys

23.7k21 gold badges97 silver badges165 bronze badges

2 Comments

sradforth Over a year ago

Doesn't seem to work on Chrome, I seem to get a NaN until the 'px' component is removed

papo Over a year ago

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?

Mike Samuel · Accepted Answer · 2012-02-17 18:01:53Z

2

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.

answered Feb 17, 2012 at 18:01

Mike Samuel

121k30 gold badges230 silver badges255 bronze badges

Comments

Tharabas · Accepted Answer · 2012-02-17 18:01:30Z

0

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

answered Feb 17, 2012 at 18:01

Tharabas

3,4121 gold badge33 silver badges31 bronze badges

Comments

Ollie Williams · Accepted Answer · 2023-05-23 17:41:37Z

0

It won't work in Firefox yet but you could use Typed OM for this.

To set one HTML elements left to be the value of another elements left + 60px:

const object1 = document.getElementById('object1');
const object2 = document.getElementById('object2');

object2.attributeStyleMap.set('left', CSS.px(object1.computedStyleMap().get('left').value + 60));

answered May 23, 2023 at 17:41

Ollie Williams

2,7745 gold badges31 silver badges51 bronze badges

Collectives™ on Stack Overflow

Add javascript pixel values?

6 Answers 6

2 Comments

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related