使用 JavaScript 更改其边距位置后如何保留 CSS 元素？答案

【问题标题】：How to retain a CSS element after I change its margin positions using JavaScript?使用 JavaScript 更改其边距位置后如何保留 CSS 元素？
【发布时间】：2020-12-30 17:22:43
【问题描述】：

我正在尝试使用 HTML、CSS 和 JavaScript 创建一个扫雷游戏。要创建网格，我使用以下代码：

<div id="game-space"></div>

<script type="text/javascript">
  for(i=0; i<40; i=i+20){
    var k = 450 + i;
    document.getElementById("game-space").style.position = "relative";
    document.getElementById("game-space").style.top = "100px";
    document.getElementById("game-space").style.left = k + "px";
    document.getElementById("game-space").style.backgroundColor = "black";
    document.getElementById("game-space").style.display = "block";
  }
</script>

我试图在每次循环运行时将左边距更新 20px，以便我可以创建一行。

现在发生的情况是，就像在示例代码中一样，循环应该运行两次，所以不是显示两个黑色块，而是在最终循环位置只显示一个块。

如何在循环进行时保留块？

【问题讨论】：

你只需更新 div 的样式两次。你想如何创建网格？你想复制<div id="game-space">吗？你在哪里声明变量i？它是一个全局变量吗？
no i 不是全局变量，我刚刚在for loop 中声明了它，是的，我想复制`
` 我只是想要它每次移动 20 像素，在实际游戏中我也想创建一个 10 单元格行，所以我需要为最终单元格运行 10 次样式吗？

标签： javascript html css frontend backend

【解决方案1】：

您需要为要创建的每个框创建一个新的div 元素。这可以通过

var g = document.createElement('div');
document.getElementById("game-space").appendChild(g);

这是您更新后的代码，所有 div 都有唯一索引

<div id="game-space"></div>

<script type="text/javascript">
  var attr = document.getElementById("game-space");
  for(i=0; i<2; i++){
    var leftOffset = 450 + i*20;
    var g = document.createElement('div');
    
    g.id = "game-space-" + i;
    g.style.position = "absolute";
    g.style.top = "100px";
    g.style.left = leftOffset + "px";
    g.style.backgroundColor = "gray";
    g.style.borderStyle = "solid";
    g.style.height = "20px";
    g.style.width = "20px";
    g.style.display = "block";

    attr.appendChild(g);
  }
</script>

【讨论】：