在 javascript 循环中设置多个 Div 的样式答案

【问题标题】：styling several Div inside a javascript loop在 javascript 循环中设置多个 Div 的样式
【发布时间】：2017-12-13 04:52:17
【问题描述】：

我使用 JavaScript 代码从头开始创建了一个 3*3 矩阵。

现在我想给它一个边框。我想看到 9 个带有实线边框的正方形。

我正在考虑在循环中动态地赋予样式。

我不知道如何为具有唯一 ID 的 div 定义变量。

这是我的代码：

for(i=1;i<=9;i++){
  'div_'+i+'_'+i.style.border= '1px solid blue';
}

【问题讨论】：

请参阅this SO 问题。但首先尝试使用 CSS 类。
@JeroenHeier 这个问题是 jQuery 特有的。
我想我需要澄清一下主题：

...

...

...
for(i=1;i

【解决方案1】：

这不是我会使用 div 的东西，因为它们不提供语义含义，而且您正在创建表格数据。

我会改用专门为此目的设计的表格。

直接为元素添加样式通常被认为是不好的做法。 CSS 通常最好这样做，这样您就不会重复自己并且能够轻松更改样式。

我编写了一个示例来演示如何使用这两种建议。

// Create a table and body
var table = document.createElement("table"); 
var body = document.createElement("tbody");

// Loop through the rows and columns to add items
var count = 1;
for (var i = 1; i < 4; i++) {

  // Create a new row
  var row = document.createElement("tr");
  for (var j = 1; j < 4; j++) {
  
    var cell = document.createElement("td");
    cell.id = count++; // Set the id
    cell.innerHTML = cell.id; // Set innerHTML to show number for example
    
    row.appendChild(cell); // Add the cell to the row
  }
  
  body.appendChild(row); // Add the row to the body
}

// Add the body to the table and the table to the document
table.appendChild(body);
document.body.appendChild(table);

table {
  border: 1px solid blue;
  /* Add the border to the whole table */
  border-left-width: 0;
  /*  But no border on the left hand side */
  border-collapse: separate;
  /*  Ensure borders are visible */
  border-spacing: 0;
  /*  But with no spaces */
}

table td {
  border-left: 1px solid blue;
  /* Add internal borders to cells */
  border-top: 1px solid blue;
}

tbody tr:first-child td {
  border-top: none;
  /* Make sure we don't have a double border on top */
}

【讨论】：

写两个嵌套循环怎么样？
@Mina 对不起，我不明白你的附加问题。
对不起。我正在考虑有两个循环，一个用于 i 从 1 到 3，在其中，另一个循环用于 j 从 1 到 3：for(i=1;i
这就是我的代码示例正在做的事情。我遍历每一行1 < 4，然后是每一列1 < 4。

【解决方案2】：

你需要使用

获取 dom

document.getElementById 并在其上添加样式

for (i = 1; i <= 4; i++) {
  document.getElementById('div_' + i).style.border = '1px solid blue';

}

<div id="div_1">1</div>
<div id="div_2">2</div>
<div id="div_3">3</div>
<div id="div_4">4</div>

【讨论】：

【解决方案3】：

只需从父元素中执行一些特定的选择器。或者为所有方块添加一个类。

我认为您正在尝试这样做：

#div_main {
height: 90px;
width: 90px;

}

#div_main div{
height: 30px;
width:90px;
display: flex;
margin:0;
}

#div_main div div{
height:30px;
width:30px;
border: 1px black solid;
margin:0;
}

<div id=div_main>
  <div id=div_1>
    <div id=div_1_1>&nbsp</div>
    <div id=div_1_2>&nbsp</div>
    <div id=div_1_3>&nbsp</div>
  </div>
  <div id=div_2>
    <div id=div_1_1>&nbsp</div>
    <div id=div_2_2>&nbsp</div>
    <div id=div_3_3>&nbsp</div>
  </div>
  <div id=div_3>
    <div id=div_3_1>&nbsp</div>
    <div id=div_3_2>&nbsp</div>
    <div id=div_3_3>&nbsp</div>
  </div>

【讨论】：