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
– Pointy, Commented Jul 13, 2017 at 14:53
@Pointy as long as the alert(pad) line isn't lying to me then yeah, I'm sure! — murchu27
– murchu27, Commented Jul 13, 2017 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
– murchu27, Commented Jul 13, 2017 at 14:59
It does not work because what is in the alert is not what you have... ;) — epascarello
– epascarello, Commented Jul 13, 2017 at 15:02

epascarello · Accepted Answer · 2017-07-13 15:06:12Z

5

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, 2017 at 15:06

epascarello

208k20 gold badges206 silver badges246 bronze badges

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

6 Comments

murchu27 Over a year ago

Aha! Perfect, that fixed it right up! I had no idea that made a difference, thanks a million!

Pointy Over a year ago

So the CSS calc() parser doesn't treat the hyphen character as a token? (?!?)

Rich Werden Over a year ago

@pointy - CSS calc() [annoyingly/confusingly] requires a space between all operators (+ \ * -)

Pointy Over a year ago

@RichWerden I guess that's what happens when you jam an alien syntax into an existing grammar :)

Rich Werden Over a year ago

Sadly, I've made the mistake and created that bug more than once.

|

diambakus · Accepted Answer · 2020-01-28 10:40:31Z

2

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

This should also work.

answered Jan 28, 2020 at 10:40

diambakus

951 silver badge8 bronze badges

Comments

RCDAWebmaster · Accepted Answer · 2021-08-02 21:52:08Z

0

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.

answered Aug 2, 2021 at 21:52

RCDAWebmaster

3356 silver badges18 bronze badges

1 Comment

Eric Mutta Over a year ago

See this question for an explanation of the footer issue (and the whole 100vh vs 100% debate).

Collectives™ on Stack Overflow

Using CSS calc() in JavaScript with a variable

3 Answers 3

6 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related