How to add JavaScript variable value to CSS variable?

Question

Trying to use Window.innerWidth and load the received value into a CSS variable, but it does not seem to work. What am I doing wrong?

function myFunction() {

  var w = window.innerWidth;
  
  document
    .documentElement
    .style
    .setProperty('--window', w);
}

:root {
  --window:0px;
}

div {
  
  height: calc(var(--window) / 2);
  background: red;
  
}

<div></div>

If an answer was helpful to you, you should accept it with the checkmark on the left of it. — Robert Bradley
– Robert Bradley, Commented Nov 15, 2022 at 15:59

soimon · Accepted Answer · 2021-01-13 18:09:21Z

2

Two reasons:

You are not calling myFunction, only defining it.
window.innerWidth returns a number without units (which represent pixels). In order for it to be a valid height value, you should add px as a suffix.

function myFunction() {
  var w = window.innerWidth;
  document.documentElement.style.setProperty('--window', `${w}px`);
}
myFunction();

:root {
  --window: 0px;
}

div {
  height: calc(var(--window) / 2);
  background: red;
}

<div></div>

Another thing you might not know: var() accepts a default value. If --window is only used once, you can write the property as height: calc(var(--window, 0px) / 2); and omit the :root ruleset.

edited Jan 13, 2021 at 18:09

answered Jan 13, 2021 at 18:03

soimon

2,6301 gold badge17 silver badges18 bronze badges

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

Comments

Mr. Polywhirl · Accepted Answer · 2021-01-13 18:28:18Z

1

You can add the rule dynamically, to the style-sheet using a insertRule or addRule.

Please review "Add Rules to Stylesheets with JavaScript" by David Walsh.

// See: https://davidwalsh.name/add-rules-stylesheets
const addCSSRules = (sheet, selector, rules, index = 1) => {
  if (typeof rules !== 'string') {
    rules = Object.entries(rules).map(entry => entry.join(':')).join(';');
  }
  if ('insertRule' in sheet) {
    sheet.insertRule(`${selector} {${rules}}`, index);
  } else if ('addRule' in sheet) {
    sheet.addRule(selector, rules, index);
  }
}

const [ sheet ] = document.styleSheets;

addCSSRules(sheet, ':root', {
  '--window': `${window.innerWidth}px`
});

:root {
  --window: 0px;
}

div {
  height: calc(var(--window) / 2);
  background: red;
}

<div></div>

edited Jan 13, 2021 at 18:28

answered Jan 13, 2021 at 18:09

Mr. Polywhirl

49.1k12 gold badges96 silver badges147 bronze badges

Collectives™ on Stack Overflow

How to add JavaScript variable value to CSS variable?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related