Using CSS calc() in JavaScript with a variable

Question

User NickC asks here if it is possible to set an element's position (or similar style properties) in js using CSS's calc() function.

Example:

var pad = "calc(1250px - 1000px)";
element.style.paddingLeft = pad;

This shows up just fine on my web page, but I would like to include a js variable in the function, like so:

var pad = "calc("+ width +"- 1000px)";
alert(pad); //displays calc( 1250px - 1000px)
element.style.paddingLeft = pad;

I included the alert statement to assure myself that the string itself was correct, which it appears to be. However, the desired padding does not appear.

Is there a problem with what I'm doing, or is it just not possible to do this?

So long as the string you end up with is a valid `calc()` expression, it's literally impossible for the browser to tell the difference. Are you sure that the value of `width` includes the "px" suffix? — Pointy, Jul 13 '17 at 14:53
@Pointy as long as the `alert(pad)` line isn't lying to me then yeah, I'm sure! — murchu27, Jul 13 '17 at 14:58
@epascarello I know I can do that, but it just seemed curious to me that the way I'm trying didn't work. — murchu27, Jul 13 '17 at 14:59
It does not work because what is in the alert is not what you have... ;) — epascarello, Jul 13 '17 at 15:02

score 3 · Accepted Answer · answered Jul 13 '17 at 15:06

3

Problem you have is a simple issue with a missing character. Without it, there is no padding, with it there is.

var width = '100px'


var element1 = document.getElementById("test1")
var element2 = document.getElementById("test2")

var pad1 = "calc(" + width + "- 90px)";  //what you have
var pad2 = "calc(" + width + " - 90px)"; //what it should be

element1.style.paddingLeft = pad1;
element2.style.paddingLeft = pad2;

div {
  background-color: red
}

<div id="test1">
  Hello 1
</div>
<div id="test2">
  Hello 2
</div>
<div>
  Hello d
</div>

answered Jul 13 '17 at 15:06

epascarello

204,599
20
195
236

Aha! Perfect, that fixed it right up! I had no idea that made a difference, thanks a million! – murchu27 Jul 13 '17 at 15:10
So the CSS `calc()` parser doesn't treat the hyphen character as a token? (?!?) – Pointy Jul 13 '17 at 15:48
@pointy - CSS `calc()` [annoyingly/confusingly] requires a space between all operators (`+ \ * -`) – Rich Werden May 14 '19 at 17:41
@RichWerden I guess that's what happens when you jam an alien syntax into an existing grammar :) – Pointy May 14 '19 at 17:43
Sadly, I've made the mistake and created that bug more than once. – Rich Werden May 14 '19 at 17:44
According to the [docs](https://developer.mozilla.org/en-US/docs/Web/CSS/calc) you need a space before and after the `+` and `-` operators, however `The * and / operators do not require whitespace, but adding it for consistency is both allowed and recommended.` – Eric Mutta Mar 31 '20 at 22:02

score 1 · Answer 2 · answered Jan 28 '20 at 10:40

1

var pad = `calc(${width} - 90px)`

This should also work.

answered Jan 28 '20 at 10:40

diambakus

85
1
8

score 0 · Answer 3 · answered Aug 02 '21 at 21:52

I finally got it, or so I thought:

window.onload = function() { resize(); }
window.onresize = function() { resize(); }

function resize() {
if (window.innerWidth >= 992){
    var H = window.innerHeight;
    H = H  - 250;
    H = H + "px";
    document.getElementById('article').style.minHeight =  H;
}
else if (window.innerWidth >= 768 && window.innerWidth <= 991){
    
    var H = window.innerHeight;
    H = H  - 237;
    H = H + "px";
    document.getElementById('article').style.minHeight =  H;  
}
else if (window.innerWidth >= 480 && window.innerWidth <= 767){
   
    var H = window.innerHeight;
    H = H  - 217;
    H = H + "px";
    document.getElementById('article').style.minHeight =  H; 
}
else if (window.innerWidth <= 479){
    
    var H = window.innerHeight;
    H = H  - 201;
    H = H + "px";
    document.getElementById('article').style.minHeight =  H; 
}
}

What I don't understand is why the footer on the phone is so far above the bottom of the page. I thought that javascript's window.innerHeight was supposed to get around the 100vh bug in CSS. what am I missing? It's almost as if I swapped one bug for another.

See this [question](https://stackoverflow.com/questions/52848856/100vh-height-when-address-bar-is-shown-chrome-mobile) for an explanation of the footer issue (and the whole 100vh vs 100% debate). — Eric Mutta, May 29 '22 at 23:05

Using CSS calc() in JavaScript with a variable

3 Answers3

Linked