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!

'calc(100% - 'getScrollbarWidth() is missing the + in between: 'calc(100% - ' + getScrollbarWidth() — Peter Pointer
– Peter Pointer, Commented Aug 4, 2022 at 7:13

Fabrizio Calderan · Accepted Answer · 2022-08-04 07:13:47Z

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

answered Aug 4, 2022 at 7:13

Fabrizio Calderan

124k26 gold badges171 silver badges183 bronze badges

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

1 Comment

Matthew Neary Over a year ago

Ahh right, I see where I was going wrong. Thanks so much!

Collectives™ on Stack Overflow

Insert Javascript variable in CSS calc() function

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related