javascript - 如何使用 JavaScript 在 CSS Grid 布局中将每一列设置为不同的颜色

Question

我试图找出一种方法来定位布局中的每一列并在每一列上设置不同的颜色。我目前的实施最好的方法是什么。任何帮助，将不胜感激。

每列应该是不同的颜色。

const container = document.getElementById("container");

function makeRows(rows, cols) {
  container.style.setProperty("--grid-rows", rows);
  container.style.setProperty("--grid-cols", cols);

  for (c = 0; c < rows * cols; c++) {
    let cell = document.createElement("div");
    cell.innerText = c + 1;
    container.appendChild(cell).className = "grid-item";
  }
}

makeRows(16, 16);

#container {
  display: grid;
  grid-template-rows: repeat(var(--grid-rows), 1fr);
  grid-template-columns: repeat(var(--grid-cols), 1fr);
}

.grid-item {
  padding: 1em;
  border: 1px solid #ddd;
  text-align: center;
  height: 100px;
  width: 100px;
}

<div id="container"></div>

标签： javascript

Answer 1

您可以在创建网格元素的循环中设置颜色，使用 : 获取列号c % cols（注意columnColors参数和倒数第二行）

function makeRows(rows, cols, columnColors) {
  container.style.setProperty("--grid-rows", rows);
  container.style.setProperty("--grid-cols", cols);

  for (c = 0; c < rows * cols; c++) {
    let cell = document.createElement("div");
    cell.innerText = c + 1;
    cell.style.backgroundColor = columnColors[c % cols];
    container.appendChild(cell).className = "grid-item";
  }
}