How to Use CSS Calc Within JavaScript

Can I use CSS calc within Javascript?

Yes, calc() will work when setting styles in javascript.

Working Example:

var innerDiv = document.getElementsByClassName('inner-div')[0];

function growInnerDiv() {
    innerDiv.style.setProperty('width', 'calc(100% + 224px)');
}

innerDiv.addEventListener('click', growInnerDiv, false);

.outer-div {
    display: inline-block;
    width: 200px;
    height: 100px;
    padding: 12px;
    border: 1px solid rgb(255,0,0);
    background-color: rgb(255,255,0);
}

.inner-div {
    width: 100px;
    height: 100px;
    color: rgb(255, 255, 255);
    font-weight: bold;
    text-align: center;
    line-height: 100px;
    font-family: arial, helvetica, sans-serif;
    background-color: rgb(255,0,0);
    cursor: pointer;
    transition: all 0.5s linear;
}

<div class="outer-div">
    <div class="inner-div">Click Me</div>
<div>

Using CSS calc() in JavaScript with a variable

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 havevar 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>

Using CSS property calc() with JS

You need a space after the minus letter :

var displace = childHeight / 2;
$(".test").css({'top': 'calc(50% - ' + displace + 'px)'});

Fiddle here

Issue getting CSS calc width with JS

Two issues. First you need to consider the padding, so add box-sizing:border-box then you defined the width using vw unit, so you will have a sqaure only when you open the page the first time and never resize the browser.

var square = document.getElementById('square');square.style.height = square.clientWidth + 'px';

#square {  background-color: blue;  width: calc(20vw - 16px);  padding: 8px;  box-sizing:border-box;}

<div id="square">Element</div>

Css calc() in js

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;}

Evaluate CSS calc function in JS

You can get the computed style using Window.getComputedStyle(). Check out the compatibility table.

Then, grab the width and remove the "px" from the result, and parse it to an integer:

let myElement = document.getElementById('child');let width = parseInt(window.getComputedStyle(myElement).width.slice(0, -2), 10);console.log(width);

#parent {  background: red;  height: 100px;  width: 80%;}
#child {  background: green;  height: 60px;  width: calc(100% - 64px);}

<div id="parent">  <div id="child"></div></div>

Use CSS/Jquery calc function in React Js

If you need some more specific CSS you need to put it into quotes - react inline styles doc

<div style={{width: 'calc(100% - 276px)'}}></div>

In your exact case

customFormat = 'hello-div'
divStyle = {width: 'calc(100% - 276px)'}
return (
    <div className={customFormat} style={divStyle}>
      Hello World
    </div>
)

In case you need to overwrite multiple widths (fallbacks) for browser compatibility

divStyle = {width: 'calc(100% - 276px)',
    fallbacks: [
        { width: '-moz-calc(100% - 276px)' },
        { width: '-webkit-calc(100% - 276px)' },
        { width: '-o-calc(100% - 276px)' }
]}

Getting a calc() CSS variable into JavaScript

Problem was, you are access root values which returns string.
and calc() function cannot calculate multiplication of 100ms * 44 so, I have changed --loaderSpeed:100 removed ms. and also created new valiable called loaderSecondsMultiplier.
After that, I have getPropertyValue get css variables values and converted them into a number and then just mutiply them and in last store it in finalTimeout.

//GETTING DOCUMENT STYLES
let docStyle = getComputedStyle(document.documentElement);
// GEETING CSS VARIABLE VALUES
let loaderSpeed = parseInt(docStyle.getPropertyValue('--loaderSpeed'));
let loaderSecondsMultiplier = parseInt(docStyle.getPropertyValue('--loaderSecondsMultiplier'));
// MUTIPLYING AND STORING IT'S VALUE TO finalTimeout
let finalTimeout = loaderSpeed * loaderSecondsMultiplier;
setTimeout(() => {
  const box = document.getElementById('loaderWrapper');
  box.style.display = 'none';
}, finalTimeout);

:root {
  --loaderSpeed: 100;
  --loaderSecondsMultiplier: 44;
}

<div id="loaderWrapper">
  <h1>hey</h1>
</div>