DOM操作中设置gridTemplateColumns无效，如何解决该问题？

你的问题出在直接给style属性赋值字符串时，使用了DOM style对象的驼峰命名，而非标准CSS属性名。

当你通过container.style = "xxx"这种方式赋值时，内部遵循标准CSS语法，需要用短横线分隔的属性名（如grid-template-columns），而非JS里的驼峰式命名（gridTemplateColumns）。CSS解析器无法识别驼峰形式的gridTemplateColumns，所以该属性不生效；而Display: grid里的属性名大小写不影响CSS解析，因此能正常生效。

两种修正方案： #

方案1：修正CSS字符串中的属性名

把gridTemplateColumns改成标准CSS属性名grid-template-columns，同时规范函数写法：

let container = document.querySelector("#container");

function setGridStyle() {
  container.style = "grid-template-columns: auto auto auto auto; display: grid;";
}

// 记得调用函数
setGridStyle();

方案2：逐个设置style对象属性（更推荐）

这种方式使用DOM style对象的驼峰命名，符合JS语法，也更易维护：

let container = document.querySelector("#container");

function setGridStyle() {
  container.style.display = "grid";
  container.style.gridTemplateColumns = "auto auto auto auto";
}

setGridStyle();

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