如何在JavaScript中为CSS gridTemplateRows插入变量参数？

这个问题我碰到过好多次啦，你之所以遇到无效的情况，核心原因是模板字符串的语法用错了！

你写的"repeat(${MyVariable}, 2fr)"用了双引号，而JavaScript里的模板字面量（就是能解析${变量}的字符串）必须用**反引号（`）**来包裹，双引号和单引号里的${}只会被当成普通字符串处理，不会替换成变量值。

正确的实现方式 #

1. 用模板字面量（推荐）

直接把整个字符串用反引号包裹，变量放在${}里就可以正常解析了：

// 先定义你的变量
const MyVariable = 3; // 可以是任意你需要的数值

// 动态设置grid行模板
document.getElementById("Grid").style.gridTemplateRows = `repeat(${MyVariable}, 2fr)`;

2. 字符串拼接（备选方案）

如果你不习惯模板字面量，也可以用传统的字符串拼接方式：

const MyVariable = 3;
document.getElementById("Grid").style.gridTemplateRows = "repeat(" + MyVariable + ", 2fr)";

额外注意事项 #

• 确保变量MyVariable是有效的数值类型，如果它是字符串（比如从输入框获取的内容），记得先转换成数字：

  const MyVariable = parseInt(document.getElementById("rowInput").value);
  // 或者用Number()转换：const MyVariable = Number(inputValue);
  

• 先确认目标元素存在，避免因getElementById返回null导致报错：

  const gridEl = document.getElementById("Grid");
  if (gridEl) {
    gridEl.style.gridTemplateRows = `repeat(${MyVariable}, 2fr)`;
  } else {
    console.error("找不到id为Grid的元素，请检查DOM结构");
  }
  

内容的提问来源于stack exchange，提问作者Jerko Viskov