如何使用JavaScript来堆叠div元素

-2

我想创建一个使用纯JavaScript而不是jQuery的棋盘。我创建了第一行，但似乎无法“堆叠”行来创建完整的纸板。如果有更好的方式去比这条路走下去，请赐教。如何使用JavaScript来堆叠div元素

<!DOCTYPE html> 
    <html> 

    <head> 
     <title>Checkerboard</title> 

     <style> 
      .box { 

       height: 50px; 
       width: 50px; 
       border: 1px solid black; 
       display: inline-block; 

      } 
     </style> 

    </head> 

    <body> 
     <div class="box"></div> 

    </body> 
    <script type="text/javascript"> 

var row = function (node, count) { 
    for (var i = 1; i < count; i++) { 
     if (i % 2 === 0) { 
      copy = node.cloneNode(true); 
      node.parentNode.insertBefore(copy, node).style.backgroundColor = "white"; 
     } else { 
      copy = node.cloneNode(true); 
      node.parentNode.insertBefore(copy, node).style.backgroundColor = "red"; 
    } 
} 

} 

row(document.querySelector('.box'), 8); 

    </script> 

</html>

来源

2015-11-26 Aweb

什么是节点？你在哪里调用行函数？> –

似乎是一个CSS问题，而不是JavaScript。尝试像在外面放置一个定义的盒子，然后将div放在相对位置。 – RobG

你的代码工作正常，你只需要实际运行你所创建的功能：

row(document.getElementsByClassName("box")[0], 50);

的jsfiddle：http://jsfiddle.net/63dcjsk4/

编辑

如果你谈论行间出现的间隙，通过使用浮点数和删除内嵌块显示来解决这个问题：

.box { 
    border: 1px solid black; 
    height: 50px; 
    float: left; 
    width: 50px; 
}

的jsfiddle：http://jsfiddle.net/63dcjsk4/1/

来源

2015-11-26 03:20:23

如何使用JavaScript来堆叠div元素

回答

相关问题