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