动态Grid组件CSS样式不匹配问题排查

核心问题分析 #

• 类名设置错误：JS创建inner_container时，用了inner_container.class = "grid-container-content"，DOM元素的类名属性是className而非class，导致.grid-container-content的Grid布局、背景色样式完全不生效，子元素的grid-column自然也无法起作用。
• HTML标签未闭合：content_container的<div>标签缺少闭合的>，虽浏览器会自动修复，但属于语法错误，建议修正。

修复后的代码 #

JavaScript

var row = 1;

function addFields() {
  row++;

  var container = document.getElementById("content_container");

  var inner_container = document.createElement("div");
  // 修正类名赋值方式
  inner_container.className = "grid-container-content";
  inner_container.id = "inner_container_" + row;

  var input = document.createElement("input");
  input.id = "input_" + row;
  input.type = "text";
  input.placeholder = "Insert goal";
  input.classList.add("input", "item2");
  inner_container.appendChild(input);

  var button = document.createElement("button");
  button.id = "button_" + row;
  button.classList.add("item3");
  button.innerText = "delete item";
  button.onclick = function() {
    inner_container.remove();
  }
  inner_container.appendChild(button);

  container.appendChild(inner_container);
}

HTML

<body>
  <div class="grid-container-head" id="header_container">
    <button class="button item1" id="button_1" type="button" onclick="addFields()">Add new item</button><br>
  </div>

  <div class="container" id="content_container"></div>
</body>

CSS（无需修改）

.grid-container-head {
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  gap: 50px;
  background-color: #2196F3;
}

.item1 {
  grid-column: 3 / span 1;
}

.grid-container-content {
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  gap: 50px;
  background-color: #2196F3;
}

.item2 {
  grid-column: 1 / span 3;
}

.item3 {
  grid-column: 4 / span 1;
}

效果说明 #

修复后，新增的每个条目容器会正确应用Grid布局，输入框跨3列、删除按钮跨1列的样式生效，背景色正常显示，点击删除按钮可准确移除对应条目。

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