CSS calc() in JavaScript

Question

I need to mix units in a dynamically generated div, but this doesn't render (IE left is still the default after that line is executed).

var tab3 = document.createElement('div');
tab3.className = 'tab';
tab3.style.display = 'none';
tab2.style.left = 'calc(~"200px+40vw")px';

Please click edit, then [<>] snippet editor and produce a minimal reproducible example — mplungjan
– mplungjan, Commented Oct 30, 2019 at 9:50
Do you actually inject tab3 somewhere in your DOM ? What is tab2 ? — sebastienbarbier
– sebastienbarbier, Commented Oct 30, 2019 at 9:53

Ori Drori · Accepted Answer · 2024-09-24 12:11:35Z

4

You've got several mistakes in your calc expression:

calc(~"200px+40vw")px -> calc(200px + 40vw)

According to @JohnWeisz's comment - calc(~"200px+40vw")px is a Less expression, ~"..." is used to prevent Less from processing the addition operation from the source stylesheet files, but that's both invalid syntax and unnecessary from CSS string context.
@G-Cyr adds that white space is required on both sides of the + and - operators. The * and / operators can be used without white space around them.

Example:

var tab3 = document.createElement('div');
tab3.className = 'tab';
tab3.style.left = 'calc(20px + 40vw)';
  
document.body.append(tab3);

.tab {
  position: absolute;
  width: 20vw;
  height: 20vh;
  background: red;
}

edited Sep 24, 2024 at 12:11

answered Oct 30, 2019 at 9:55

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

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

3 Comments

John Weisz Over a year ago

Explanation: calc(~"200px+40vw")px is a Less expression, ~ is used to prevent Less from processing the addition operation from the source stylesheet files, but that's both invalid syntax and unnecessary from JS string context.

Ori Drori Over a year ago

@JohnWeisz - I was adding my explanation to the answer, but I'll take your nice comment instead :)

G-Cyrillus Over a year ago

also In addition, white space is required on both sides of the + and - operators. (The * and / operators can be used without white space around them.) drafts.csswg.org/css-values-3/#calc-syntax would be worth to remind ... :)

Collectives™ on Stack Overflow

CSS calc() in JavaScript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related