CODEWITHSUNDEEP
javascriptcss
Matthew Neary
Matthew Neary

Reputation: 13

Insert Javascript variable in CSS calc() function

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!

Upvotes: 1

Views: 342

Answers (1)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123387

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 + ')');

Upvotes: 1

Related Questions