如何使用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元素

回答

相關問題