Как складывать элементы div с помощью JavaScript

-2

Я пытаюсь создать контрольную панель с использованием чистого JavaScript, а не jQuery. Я создал первую строку, но не могу «стекать» строки, чтобы создать полный пансион. Если есть лучший способ сделать это, чем путь, по которому я иду, пожалуйста, просветите меня.Как складывать элементы div с помощью JavaScript

<!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/

Редактировать

Если вы говоря о пробеле, который появляется между строками, исправить это, используя float и удалив отображение встроенного блока:

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

JSFiddle: http://jsfiddle.net/63dcjsk4/1/

источник

2015-11-26 03:20:23

Как складывать элементы div с помощью JavaScript

ответ

Смежные вопросы