Insert Javascript variable in CSS calc() function

Question

I've got a JS variable representing a width in pixels that I'd like to use inside a CSS calc() function.

The variable is holding the width of a div's scrollbar.

let table = document.getElementById("RGtable");

let offsetWidth = RGtable.offsetWidth;
let clientWidth = RGtable.clientWidth;

function getScrollbarWidth() {
  return offsetWidth - clientWidth;
};

let scrollbarWidth = getScrollbarWidth() + "px";

let header = document.getElementById("tableHeader");

// This is where I have the problem
header.style.setProperty('width', 'calc(100% - scrollbarWidth)');

I've tried:

header.style.setProperty('width', 'calc(100% - 'getScrollbarWidth() + 'px'')');

which gives me errors, and

header.style.setProperty('width', 'calc(100% -  ${width})')

which is based off of this post.

I know I'm missing something, just can't figure out what!

Answer 1

You have to properly interpolate the string:

with backticks (not single quotes)

header.style.setProperty('width', `calc(100% - ${scrollbarWidth})`);

or with string concatenation

header.style.setProperty('width', 'calc(100% - ' + scrollbarWidth + ')');