Question

我是Javascript的新手，我正在构建一个连接四游戏来了解javascript。问题是我无法在'o'之间添加边距，因此它们看起来都是一团糟。我想帮助在'o'之间添加边距或填充。有些想法是我可能需要在表格中添加'o'的每一行。但是，我正在通过javascript函数更新它。我该如何解决这个问题？

我的javascript文件

var first_row  = ['o','o','o','o','o','o','o'];

onload = function ()
     {
       document.getElementById("row1").innerHTML = first_row;
     }

HTML文件

<h1 class="space" id="row1"></h1>

Answer 1

在纯javascript（不使用jquery）中使用for in循环而不是追加跨度使用'0'进行样式化。

var first_row  = ['o','o','o','o','o','o','o'];
var row = document.getElementById('row1');

for (var i in first_row) {
  var span = document.createElement('span');
  span.innerHTML = first_row[i];
  row.appendChild(span);  
}

见这里：http://jsfiddle.net/95JqK/17/

Answer 2

你必须将它们封装到标签中并在其上加上css规则。

一个简单的解决方案是：

var first_row  = ['<span>o</span>','<span>o</span>','<span>o</span>','<span>o</span>','<span>o</span>','<span>o</span>','<span>o</span>'];

onload = function ()
 {
   document.getElementById("row1").innerHTML = first_row;
 }

在css文件中：

span {
    margin: 0 10px 0 10px;
}

Answer 3

也许你可以在class =“space”元素上使用CSS

.space{
    padding: 8px;
}

Javascript在数组中的每个对象之间添加边距

3 个答案: