如何在CSS calc()函数中插入JavaScript变量？

你的核心问题是没有正确将JavaScript变量插入到CSS calc()的字符串中，JS不会自动解析字符串里的变量名，同时你尝试的写法存在语法错误，具体修正如下：

先修正原代码的小bug #

你定义了let table = document.getElementById("RGtable");，但后续用了RGtable.offsetWidth，这里应该用变量名table，否则会报RGtable is not defined错误：

let table = document.getElementById("RGtable");
let offsetWidth = table.offsetWidth; // 修正为table，不是RGtable
let clientWidth = table.clientWidth;

正确的两种写法 #

写法1：字符串拼接 #

通过+号把变量和calc的字符串片段拼接起来，注意引号的闭合：

// 用已定义好的scrollbarWidth变量
header.style.setProperty('width', 'calc(100% - ' + scrollbarWidth + ')');

// 或者直接调用函数并拼接px单位
header.style.setProperty('width', 'calc(100% - ' + getScrollbarWidth() + 'px)');

写法2：ES6模板字符串（推荐） #

模板字符串需要用**反引号（）**包裹，变量用${变量名}`插入，写法更简洁不易出错：

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

// 或者直接调用函数加单位
header.style.setProperty('width', `calc(100% - ${getScrollbarWidth()}px)`);

为什么之前的写法报错？ #

• 你尝试的'calc(100% - 'getScrollbarWidth() + 'px'')'：引号嵌套错误，字符串未正确闭合，JS无法识别语法。
• 你参考的'calc(100% - ${width})'：用了单引号而不是反引号，模板字符串必须用反引号才能解析${}里的变量。

内容的提问来源于stack exchange，提问作者Matthew Neary