How can I set an element's position with Javascript if this position uses the calc() function?

Question

This works as expected:

document.getElementById('blah').style.left = '200px';

However, this refuses to work for reasons unknown to me:

document.getElementById('blah').style.left = 'calc(225px-25px)';

No errors in the console. The property simply seems not to be set.

Why? And how to make this work?

And why don't you set it to 25px? https://stackoverflow.com/questions/40871127/can-i-use-css-calc-withing-javascript — z3nth10n, Sep 02 '17 at 00:14
I mean instead of using `calc(225px-220px)` use: `20px`directly. It doesn't make sense. calc is more for percentages. — z3nth10n, Sep 02 '17 at 00:17
@Ikillnukes Sure but this is meat to be minimal example of a failing code aimed to be as simple as possible and not to make any actual sense. Besides in my particular use case I have one of these values in a variable so using `calc` saves me one `toString()` and one `parseInt()`. — , Sep 02 '17 at 00:22

score 1 · Accepted Answer · answered Sep 02 '17 at 00:22

1

Your problem is that when using calc with + and - operators you must always wrap the operator with whitespce on both sides:

calc(225px - 25px)

This will work for you:

document.getElementById('blah').style.left = 'calc(225px - 25px)';

answered Sep 02 '17 at 00:22

Dekel

1 Answers1