javascript - 使用循环在 HTML 中创建多条垂直线

Question

我是 JS 的新手，想在我的网页中创建 10 条垂直线。我已经将我的 HTML 代码写为

  <div id="verticle-line"></div>

在我的 CSS 中有

#verticle-line {
width: 1px;
min-height: 400px;
background: red;  
margin:15px;  
float:left
}

如何使用 JavaScript 在我的网页中创建 10 行这样的行？

Answer 1

有很多方法可以做到这一点，但最简单的可能是:

for(var i=0; i<10; i++) {
  document.write('<div class="verticle-line"></div>');
}

使用 for 循环在您的页面上写入 10 个 div。我还将 id 更改为 class，因为您的页面上不应有多个具有相同 id 的元素。确保更改 CSS 以匹配类。